6

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.
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
DreamTeK
  • 32,537
  • 27
  • 112
  • 171
  • For me, It's always worked (within responsive web design ánd a hybrid app) to simply use `$('.element').on("click tap", function(){stuff here});`. Note that using ".on" allows you to combine events, where as stuff such as .click will get deprecated at one point. -- IF that doesn't work, there's always the option to use `.on("touchend")` or `touchstart`. I hope this helps. – NoobishPro May 01 '16 at 14:54

6 Answers6

0

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);
Ian MacDonald
  • 13,472
  • 2
  • 30
  • 51
  • 2
    Because target should always have a value attribute (input/textarea), I would rather use `event.target.selectionEnd = event.target.value.length`; – Apolo Apr 25 '16 at 12:33
  • 1
    The 999 limit is far, but I absolutely agree with @Apolo about event.target.value.length to make the selection. – miguel-svq May 01 '16 at 08:04
  • 1
    I agree, guys. Full disclosure: I'm not a Javascript developer and was solving this problem with only a superficial understanding of what was available within the method. `event.target.value.length` is clearly better. – Ian MacDonald May 02 '16 at 13:17
0

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

cytsunny
  • 4,838
  • 15
  • 62
  • 129
  • Thanks for the suggestion of hammer however your fiddle doesn't work and this is still going to fail on number inputs. Right? – DreamTeK Apr 26 '16 at 07:45
  • For number field, other method is needed to select the value, but the tap function also works on number inputs. – cytsunny Apr 26 '16 at 07:58
0

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.

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • I actually need a solution for mobile / tablets users. It is ipads that are causing me the headache. This seems like a creative idea but is very hacky :) – DreamTeK Apr 27 '16 at 09:48
  • I hate this "number" input type!!! What a bad idea from the HTML5 standard developpers. The only thing usefull of this input type is the numeric keyboard. The bad thing is that there is no other way to trigger it. Have to suffer the the limitations like maxlenght not supported, leading zeros wipeds out on javascript fill... And what about the ugly spinbox nobody would ever use! Btw, the solution i used to hide that thing is here: http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box – Louys Patrice Bessette Apr 28 '16 at 02:10
  • @Obsidian: Wasn't your question exactly on how to hack HTML to get the wanted result ?? ;) – Louys Patrice Bessette Apr 28 '16 at 02:28
  • @Louys You can trigger it with inputmode="numeric". It's the default for type number, but you can use it on text fields. Check it in my answer and in the spec: https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute & https://html.spec.whatwg.org/multipage/forms.html#text-(type=text)-state-and-search-state-(type=search) – miguel-svq May 01 '16 at 08:40
  • 1
    @Miguel: Interesting! I didn't know about this attribute... Which seems to be suggested in HTML 5.1. For sure, it works neither on Android browser or Chrome for Android. I just tryed it. I found this cross-browser status info for that specific : http://www.wufoo.com/html5/attributes/23-inputmode.html – Louys Patrice Bessette May 01 '16 at 19:23
  • @Louys: Thanks a lot! Didn't know the real status of compatibility, I've retouch the solution using pattern attribute... I hope it works now (still can't check it) – miguel-svq May 02 '16 at 09:50
0

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">

Edit: added fiddle and this.value.length to the selection range as suggested by @Apolo

Edit: using pattern="[0-9]*" , didn't know the real status of compatibility among browsers, as @Louys have pointed.

miguel-svq
  • 2,136
  • 9
  • 11
0

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();
});
adnan tariq
  • 197
  • 2
  • 13
-1

It's very easy to select text within an <input type="text"/>, <input type="tel"/> or <input type="number"/> using JavaScript/jQuery. Below is the code I use all the time when integrating input text or number. In our case, the JavaScript code is added directly to the input itself, which makes things a lot more convenient. We listen to click events and hen we fire two built-in JavaScript functions: focus() & select();

Right of the bat, this solution works for <input type="text"/> without jQuery, but in order to make <input type="number"/> or <input type="tel"/> work, you need to include jQuery's library. This Solution also works well ontap events on mobile devices.

<input type="text" placeholder="Search" id="searchItem" onclick="this.focus();this.select()">

Checkout this working example on Codepen.

AllJs
  • 1,760
  • 4
  • 27
  • 48
  • This is the standard way to select text with javascript. It is part of the stock code but this will not work on apple devices because of the issues stated above. – DreamTeK Apr 29 '16 at 07:58