Selecting All Text in HTML Text Input When Clicked

Selecting all text in HTML text input when clicked

You can use the JavaScript .select() method for HTMLElement:

<label for="userid">User ID</label>
<input onClick="this.select();" value="Please enter the user ID" id="userid" />

Select all contents of textbox when it receives focus (Vanilla JS or jQuery)

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

How to select text on click input box in JavaScript?

You can add this script at the bottom of your body tag

<script>
  document.querySelectorAll('.js-select-input').forEach(input => {
    input.addEventListener('click', (e) => e.currentTarget.select())
  })
</script>

and for every input that you would like to have this autoselect functionality add the class "js-select-input" as in this example:

<input class="js-select-input" value="foo">

HTML textbox input- Always select all text on click

This was a fun one!

The trick is not to preventDefault() on the click event, but instead the mouseDown event.

$('#clickme').on('mousedown', function(e) {
  e = e || window.event;
  e.preventDefault();
  $(this).select();
});

Here's a working fiddle and the related question I got the answer from

Auto select text in HTML input

AFAIK there is no default feature which highlight an input text when it's active in HTML. You will need to use some Javascript.

I can recommand you to check out this StackOverflow question which provides a simple and pretty efficient code:

<input type="text" name="textbox" value="Test" onclick="this.select()" />

Select all text in textbox when label is clicked

I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.

By using jQuery, you can use the select() method when the label is clicked, using something like this;

$(function() {
    $('label').click(function() {
        var id = $(this).attr('for');
        $('#'+id).select();
    });
});

A working example can be found here: http://jsfiddle.net/sf3bgwxr/

Selecting text in a text input field via jQuery causes other elements to require double click instead of single click to fire?

As pointed out by Anthony McGrath, the problem was that the text selection input was interfering with the CSS style that was used to make the toggle switch work. The topcoat.io toggle switch style relies on input: focus, input:active, and input:checked selectors to properly function, and the selection of the text interfered with those selectors.

I've solved this by adding a clearSelection() function to the focusOut event of each text box. The clear selection function I used was provided courtesy of Tim Down:

https://stackoverflow.com/a/14788286/2450280

Selecting All Text in HTML Text Input When Clicked