Select the content of input / textbox field on tap / click

react select all text in input
select text input on click
angular input select all on focus
setselectionrange
input select all on click
highlight text on click javascript
javascript on click select text
select all on click html
My kingdom for a selectable textbox

The challenge:

Creating a cross browser textbox/input field of 'any' type that can select its contents on click/tap.

A problem that has eluded many for years.

The issue:

When using a touch device the tap event fires when the mouse uses the click event. On Apple devices the tap event does not fire the onclick or onfocus. This is not a Safari specific issue because Google Chrome has the same issue on Apple devices but NOT on android devices. There is clearly a difference in the way apple devices handle tap events.


The standard way to select text is to simply use:

$('input').focus(function () {
  $(this).select();
});

Another selected work around mentioned on stack overflow is:

$('input').focus(function () {
  this.select(); //no jquery wrapper
}).mouseup(function (e) {
  e.preventDefault();
});

Both work nicely but neither work on apple devices.

The only working solution I have found is to create a selection range as per this post. This is pure javascript and works great.

$('input').click(function () {
  document.getElementById('ID').selectionStart = 0
  document.getElementById('ID').selectionEnd = 999
});

THE MASTER SOLUTION

With all this knowledge I came up with a combinded solution of my own here.

$('.Select').focus(function () {
  this.select();
  this.setSelectionRange(0, 9999);
}).mouseup(function (e) {
  e.preventDefault();
});

REVISITING THE PROBLEM

This has been a long standing problem that i thought was solved but now we reach 2016 and the problem rises from the earth like the walking dead.

The spec now clearly states:

You cannot use 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

So the master code will no longer work on the number fields of apple devices.

Here we are again and it's time to get some bounty hunters on the case!

IMPORTANT ADDITIONAL INFORMATION: I hate apple.


$('.Select').focus(function () {
  this.select();
  this.setSelectionRange(0, 9999);
}).mouseup(function (e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input type text
<br/><input type="text" value="click me" class="Select">
<br/>Input type number
<br/><input type="number" value="0" class="Select">
<br/>I dont like apples.

Tap and click are two events. Different mobile OS have their way to map the two events. Not only click, Android and iOS map hover events with tap in different ways too. It is like some time ago where different browsers has different set of javascript and so jquery is there to solve the problem.

So, I suggest you use a library called hammer.js to handle it.

var hammertime = new Hammer($(".testing")[0]);
hammertime.on('tap', function(ev) {
        event.target.selectionStart = 0
    event.target.selectionEnd = 999
});

var hammertime2 = new Hammer($(".testing2")[0]);
hammertime2.on('tap', function(ev) {
        $(event.target).select(); //to select number input, use this method
});

jsFiddle demo

javascript, Tap and click are two events. Different mobile OS have their way to map the two events. Not only click, Android and iOS map hover events with tap in different  Select All Text by Clicking on Text Field or Textarea Box This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce their manual work. For instance when users need to copy to the clipboard all text quickly or quickly delete the text from the field.


What about temporarily change the type attribute? I suppose that the selected text is to be replaced by the user input... You will have to restore the original type attribute as soon as the user types in something OR on blur in case he would leave the field without typing anything.

I don't have any Apple device to try it... ;)

$('.Select').focus(function () {
  if($(this).attr("type")=="number"){
    // Temporarly change the type atttribute to "text"
    $(this).attr({"type":"text"});
    $(this).addClass("wasNumber");
  }
  this.setSelectionRange(0, 9999);
  this.select();
  }).mouseup(function (e) {
  e.preventDefault();
});

$('.Select').keyup(function () {
    if($(this).hasClass("wasNumber")){
        // Restore the original type atttribute
        $(this).attr({"type":"number"});
        $(this).removeClass("wasNumber");
    }
});

$('.Select').blur(function () {
    if($(this).hasClass("wasNumber")){
        // Restore the original type atttribute
        $(this).attr({"type":"number"});
        $(this).removeClass("wasNumber");
    }
});

Important EDIT: I just tryed it on one of my projects... And it works... BUT, if you rely on the number type to display a numeric keyboard to your mobile users... It's the text keyboard that shows. And right after the first character is entered, since the field is now switched back to "number", Snap! the mobile keyboard just dissapeared... Like a focus out. No good!

It would have been less bad to get the numeric keypad displayed at this moment, but no.

So I came back here to tell that my so simple solution is not mobile friendly, which is a good reason not to use it. I really tryed to answer... And fully tested my idea. Please do not downvote. ;)

Just for the record: For now and until a better solution, I simply remove the value completely on focus instead of selecting it... Since the value will be changed by the user anyway.

HTMLInputElement.select(), Click the button in this example to select all the text in the <input> element. HTML​. <input type="text" id="text-box" size="20" value="Hello world! Right click on it and select ‘Edit content’. Then, drag a Text widget inside the panel and type in a value. Select the Dynamic Panel and create a new Panel by clicking on the ‘+’ icon. Insert an Input Text Field widget and a Button widget in the new panel.


The "select/write a number" UI could be not a numeric keyboard on certain devices for some fields: Something different like increase & decrease triggers could make the text selection undesirable. That not only affects to type number: "setSelectionRange method apply only to inputs of types text, search, URL, tel and password" (https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement), so dates and others are also affected.

A very simple approach (maybe solution for this case): What about making the desired fields type "text" (so the actual solution still works) and using "inputmode=numeric" to make the device show it's numeric input UI? https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute

...and as it is not widely supported, we could give a try to attribute pattern, it seems to force the numeric keyboard on Ipads (no Apple device to check) pattern="[0-9]*"

<input class="Select" type="text" inputmode="numeric" pattern="[0-9]*">

Could someone please check if the fiddle works as expected with an Apple device? I have none. Thanks.

$('.Select').focus(function () {
  this.select();
  this.setSelectionRange(0, this.value.length);
}).mouseup(function (e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="Select" type="text" pattern="[0-9]*" inputmode="numeric">

The Graphic Designer's Digital Toolkit: A Project-Based , Select Type: Text Field and Event: On Release or Tap. The completed boxes will also display an icon indicating they are created as input text fields. you can determine what happens as an Event when you choose to “Click “on the Due to electronic rights, some third party content may be suppressed from the eBook  Hi, I use the input_SetFocus widget to set the cursor in the SearchInput field together with an onfocus extended property to select the text already present in the input field.


What about this?

function addClickSelector(obj) {
  function selectText(event) {
    event.target.selectionStart = 0
    event.target.selectionEnd = event.target.value.length
  };

  if (obj.addEventListener) {
    obj.addEventListener("click", selectText, false);
  } else {
    obj.attachEvent("onclick", selectText);
  }
};
[].forEach.call(document.getElementsByClassName('selectOnClick'), addClickSelector);

Highlight All Text by Clicking on Text Field or Textarea Box , This script highlight all text in textarea or text field (input tag) by clicking on it. need to copy to the clipboard all text quickly or quickly delete the text from the field. type="text" id="txtfld" onClick="SelectAll('txtfld');" style="width:200px" value​  The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field. Syntax element.select(); Example. Click the button in this example to select all the text in the <input> element. HTML


yeah, I was going crazy trying to find this solution. Basically, you have to REARRANGE the events focus, then click, then touchstart.

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  e.preventDefault();
});

.val(), Get the single value from a single select and an array of values from a multiple select and display <p>Type something and then click or tab out of the input.</p​>. This means that if we click on a text box with a mouse, the text box will be highlighted any color that we choose. We achieve this using the onfocus event handler. The onfocus event handler in Javascript is an event handler that executes when an item becomes into focus on a user's screen, such as when a user clicks inside of a text box.


HTML DOM Input Text select() Method, The select() method is used to select the contents of a text field. Browser Support. Method. select(), Yes, Yes, Yes, Yes, Yes  CSS-Tricks * is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.


Prototyping forms and inputs, For example, in iPhone device prototypes, focusing in on an Input Text Field “​On Key Up” + “Set Value” action and select the third Input Text Field as the target, Note: In mobile prototypes, “On Click” changes to “On Tap” but they serve the  I have a webpage containing a textbox. Some events are bound to the textbox on key events, hence the UI changes as the user types on the textbox. With IE10 a clear ('X') button appears on the textbox which allows users to clear the textbox.


label, The <label> element is used to associate a text label with a form <input> field. to tell users the value that should be entered in the associated input field. user can click (or finger-tap) the label in order to bring focus to the element or select it. Note. Although the Extensible Application Markup Language (XAML) version of the example could use the <TextBox.Text> tags around the text of each button's TextBox content, it is not necessary because the TextBox applies the ContentPropertyAttribute attribute to the Text property.