Selecting all text in HTML text input when clicked

Adding spice with onClick

For a hot-and-spicy user interaction, pair the onClick event with this.select(). This oh-so-tasty blend has its roots in the HTMLInputElement API. Keen on simplicity and brevity, it lets the user select all text it as swiftly as you would dip a chip in salsa. Just remember, like guacamole, type="text" is an essential ingredient here.

jQuery for the win

Moving on to a delicious jQuery method, your code maintains its ensemble of ingredients, yet gains a Michelin star for dynamism:

$(document).on('click', 'input[type="text"]', function() {
  // Hey, look ma! I'm selecting.
  this.select();
});


This jQuery version hosts a grand event inviting all inputs, without needing to sprinkle magic dust on each one separately, and it works wonders on inputs that decide to crash the party later.

Persistence and focus, seasoned just right

In some cases, like a stubborn meatball, Chrome didn't initially allow immediate text selection after the click. setTimeout() can soften that meatball right up:

document.querySelector('input[type="text"]').addEventListener('click', function(event) {
  const target = event.target;
  setTimeout(() => { 
    // Chrome, are you listening? Ok, now select!
    target.select(); 
  }, 1);
});


To prevent reselection, we can keep track of the focused element:

let focusedElement;

document.addEventListener('focus', function(event) {
  if (event.target.tagName === 'INPUT' && focusedElement === event.target) {
    return; // No, you won't select again!
  }
  focusedElement = event.target;
}, true);


The contenteditable pie

contenteditable is a uniquely made chocolate pie, where text selection rules are defined by Range API:

function selectContentEditableText(element) {
  const range = document.createRange();
  range.selectNodeContents(element); // Yum, gotcha, everything!
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);  // Voila, text is selectable!
}


But keep away from document.execCommand('selectall', null, false); as it's been discontinued like an unpleasant dessert.

Label placeholders and accessibility

Placeholder text should disappear faster than your favorite dish at a family dinner. But remember—placeholders are appetizers, actual labels are the main courses:

<label for="inputField">Text field: </label>
<input id="inputField" type="text" placeholder="Start typing..." onClick="this.select();" />


A cherry on top: cursor position

To keep the cursor under control post-selection, add a little whipped cream with an event listener:

document.querySelector('input[type="text"]').addEventListener('mouseup', function(event) {
  // Stop! Halt! Controls at your fingertips!
  event.preventDefault();
});


Accessibility and UX have a special place in our menu. High-level usability helps out those using assistive technologies. Sprinkle in autocomplete features to keep your diners smiling:

<input type="text" list="suggestions" onClick="this.select();" />
<datalist id="suggestions">
  <option value="Suggestion 1"></option>
  ...
</datalist>


Lastly, integrate jQuery from a guaranteed source, like the Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
