All geek questions in one place

Select the contents of the input field / text field when pressed / clicked

My kingdom for selectable text box

Task:

Creating a cross-browser text box / input field of any type that can select its contents when clicked / clicked.

A problem that has not eluded for many years.

Problem:

When using a touch device, the tap event fires when the mouse uses the click event. On Apple devices , the tap event does not onfocus onclick or onfocus . This is not a Safari problem, since Google Chrome has the same problem on Apple devices, but NOT on Android devices. Obviously, there is a difference in how Apple devices handle click events.

The standard way to select text is simply:

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

Other selected work around mentioned:

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

Both work well, but do not work on apple devices.

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

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

MASTER SOLUTION

With all this knowledge, I came up with my own solution.

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

RETURN OF THE PROBLEM

This was a long-standing problem that I thought was resolved, but now we have reached 2016, and the problem rises from the ground like the walking dead.

The specification now clearly states:

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

Thus, the master code will no longer work with the numeric fields of apple devices.

Here we are again and it’s time to get bounty hunters on the hunt!

IMPORTANT ADDITIONAL INFORMATION: I hate the 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.
+6
source share
6 answers

How 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);
0
source

Click and click two events. Different mobile operating systems have the ability to match two events. Not only click, Android and iOS hover over events with a tap in different ways. It looks like different browsers have a different set of javascript, and so jquery should solve the problem.

So, I suggest you use the hammer.js library to process 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

0
source

How to temporarily change a type attribute?

I believe that the highlighted text should be replaced with user input ...

You will need to restore the attribute of the original type as soon as the user types or is blurry if he leaves the field without typing anything.

I do not have an Apple device to try ...;)

 $('.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 tried it on one of my projects ... And it works ... BUT, if you rely on the type of number to display the numeric keypad for your mobile users ... This is a text keyboard that displays. And immediately after entering the first character, since the field now switches to the "number", Snap! the mobile keyboard just disappeared ... Like a trick. No good!

It would be bad if the numeric keypad was displayed at the moment, but no.

So, I came back here to say that my so simple solution is not mobile, which is a good reason not to use it. I really tried to answer ... And completely tested my idea. Please do not go down .;)

Just for the record: for now, and until a better solution, I just completely delete the value in focus, and do not select it ... Since in any case, the value will be changed by the user.

0
source

The select / record number user interface cannot be a numeric keypad on some devices for some fields: something else, such as increase and decrease triggers, can make unwanted text selections. This not only affects the type number: "the setSelectionRange method applies only to text type, search, URL, tel and password inputs" ( https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement ), therefore also dates and others are taken into account.

A very simple approach (perhaps a solution for this case): how about getting the required fields to enter “text” (so the actual solution still works) and using “inputmode = numeric” so that the device displays its numeric input interface? https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute

... and since it is not widely supported, we can try to attribute the template, it seems to force the numeric keypad on Ipads (not check the Apple device) pattern = "[0-9] *"

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

Can someone please check if the violin works as expected from an Apple device? I do not have. 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 script and this.value.length to the selection range suggested by @Apolo

Edit: using pattern = "[0-9] *", did not know the real compatibility status between browsers, as @Louys pointed out.

0
source

Yes, I went crazy trying to find this solution. Basically, you have to RECORD the focus of events, then press, then tap.

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

It is very easy to select text in <input type="text"/> , <input type="tel"/> or <input type="number"/> using JavaScript / jQuery . Below is the code that I use all the time when combining input text or number. In our case, the JavaScript code is added directly to the input itself, which makes things much more convenient. We listen to click events and run two built-in JavaScript functions: focus() and select() ;

Right to bat, this solution works <input type="text"/> without jQuery , but in order to make <input type="number"/> or <input type="tel"/> , you need to enable jQuery library. This solution also works well on tap events on mobile devices.

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

Checkout this working example on Codepen .

-1
source

Source: https://habr.com/ru/post/976876/

More articles:


All Articles