Selecting all text in HTML text input when clicked

Selecting all text in HTML text input when clicked

I have the following code to display a textbox in a HTML webpage.

When the page displays, the text contains the Please enter the user ID message. However, I found that the user needs to click 3 times in order to select all the text (in this case it is Please enter the user ID).
Is it possible to select the entire text with only one click?
Edit:
Sorry, I forgot to say: I must use the input type=”text”

Solutions/Answers:

Solution 1:

You can use this javascript snippet:

<input onClick="this.select();" value="Sample Text" />

But apparently it doesn’t work on mobile Safari. In those cases you can use:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Solution 2:

The previously posted solutions have two quirks:

  1. In Chrome the selection via .select() doesn’t stick – adding a slight timeout resolves this issue.
  2. It’s impossible to place the cursor at a desired point after focus.

Here’s a complete solution that selects all text on focus, but allows selecting a specific cursor point after focus.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

Solution 3:

Html (you’ll have to put the onclick attribute on every input you want it to work for on the page)

 <input type="text" value="click the input to select" onclick="this.select();"/>

OR A BETTER OPTION

jQuery (this will work for every text input on the page, no need to change your html):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

Solution 4:

I know this is old, but the best option is to now use the new placeholder HTML attribute if possible:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

This will cause the text to show unless a value is entered, eliminating the need to select text or clear inputs.

Solution 5:

The answers listed are partial according to me. I have linked below two examples of how to do this in Angular and with JQuery.

This solution has the following features:

  • Works for all browsers that support JQuery, Safari, Chrome, IE, Firefox, etc.
  • Works for Phonegap/Cordova: Android and IOs.
  • Only selects all once after input gets focus until next blur and then focus
  • Multiple inputs can be used and it does not glitch out.
  • Angular directive has great re-usage simply add directive select-all-on-click
  • JQuery can be modified easily

JQuery:
http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angular:
http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

Solution 6:

Try:

onclick="this.select()"

It works great for me.