Seleccione el contenido del campo de input / textbox al tocar / hacer clic

Mi reino para un textbox seleccionable


El reto:

Crear un textbox / campo de input cruzado del browser de cualquier tipo que pueda seleccionar su contenido onclick / tocar.

Un problema que ha eludido a muchos durante años.

La cuestión:

Cuando se utiliza un dispositivo táctil, el evento tap se dispara cuando el mouse usa el evento de click . En los dispositivos Apple , el evento tap no dispara el onclick o onfocus . Este no es un problema específico de Safari porque Google Chrome tiene el mismo problema en los dispositivos Apple, pero NO en los dispositivos Android. Claramente hay una diferencia en la forma en que los dispositivos de Apple manejan los events de toma.


La forma estándar de seleccionar text es simplemente usar:

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

Otro trabajo seleccionado alnetworkingedor mencionado en el desbordamiento de la stack es:

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

Ambos funcionan bien pero ninguno funciona en dispositivos Apple.

La única solución que he encontrado es crear un range de selección según esta publicación . Esto es javascript puro y funciona muy bien.

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

LA SOLUCIÓN MAESTRA

Con todo este conocimiento, se me ocurrió una solución combinada aquí.

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

REVISAR EL PROBLEMA

Este ha sido un problema de larga data que pensé que se había resuelto, pero ahora llegamos a 2016 y el problema se levanta de la tierra como los muertos vivientes.

La especificación ahora dice claramente:

No puede usar 'setSelectionRange' en 'HTMLInputElement': El tipo de elemento de input ('número') no es compatible con la selección.

Entonces, el código maestro ya no funcionará en los campos numéricos de los dispositivos Apple.

¡Aquí estamos otra vez y es hora de search algunos cazarrecompensas en el caso!

INFORMACIÓN ADICIONAL IMPORTANTE: Odio la manzana.


 $('.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. 

Toque y click dos events. Los diferentes sistemas operativos mobilees tienen su manera de mapear los dos events. No solo click events de desplazamiento del map de Android e iOS con toque de diferentes maneras también. Es como hace un time en que diferentes browseres tienen un set diferente de javascript y, por lo tanto, existe jquery para resolver el problema.

Por lo tanto, sugiero que use una biblioteca llamada hammer.js para manejarla.

 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 }); 

demo jsFiddle

¿Qué pasa con el cambio temporal del atributo de tipo?

Supongo que el text seleccionado debe ser reemplazado por la input del usuario …

Tendrá que restaurar el atributo de tipo original tan pronto como el usuario escriba algo O en la falta de definición en caso de que salga del campo sin escribir nada.

No tengo ningún dispositivo Apple para probarlo …;)

 $('.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"); } }); 

Importante EDIT: Solo lo intenté en uno de mis proyectos … Y funciona … PERO, si confías en el tipo de número para mostrar un keyboard numérico a tus usuarios mobilees … Es el keyboard de text que muestra. Y justo después de ingresar el primer carácter, ya que el campo ahora vuelve a "número", Snap! el keyboard mobile simplemente desapareció … Como un foco fuera. ¡No es bueno!

Hubiera sido less malo get el keyboard numérico en este momento, pero no.

Entonces volví aquí para decirle que mi solución tan simple no es amigable para dispositivos mobilees, que es una buena razón para no usarla. Realmente intenté responder … Y probé completamente mi idea. Por favor no vayas abajo. 😉

Solo para que conste: de momento y hasta una solución mejor, simplemente elimino el valor por completo en foco en lugar de seleccionarlo … De todos modos, el valor será cambiado por el usuario.

Es muy fácil seleccionar text dentro de un <input type="text"/> , <input type="tel"/> o <input type="number"/> usando JavaScript / jQuery . A continuación se muestra el código que uso todo el time al integrar text o número de input. En nuestro caso, el código JavaScript se agrega directamente a la input misma, lo que hace que las cosas sean mucho más convenientes. Escuchamos events de clic y cuando disparamos dos funciones de JavaScript incorporadas: focus() & select() ;

A la derecha del bate, esta solución funciona para <input type="text"/> sin jQuery , pero para que <input type="number"/> o <input type="tel"/> funcione, necesita Incluya la biblioteca de jQuery . Esta solución también funciona bien en tap events en dispositivos mobilees.

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

Verifique este ejemplo de trabajo en Codepen .

La interfaz de usuario "seleccionar / escribir un número" no puede ser un keyboard numérico en ciertos dispositivos para algunos campos: Algo diferente como boost y disminuir los desencadenantes podría hacer que la selección de text no sea deseable. Eso no solo afecta al número de tipo: "el método setSelectionRange se aplica solo a las inputs de types de text, búsqueda, URL, tel y contraseña" ( https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement ), por lo que Las dates y otros también se ven afectados.

Un enfoque muy simple (quizás una solución para este caso): ¿Qué hay de hacer que los campos deseados digan "text" (para que la solución real siga funcionando) y el uso de "inputmode = numeric" para hacer que el dispositivo muestre su UI de input numérica? https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute

… y como no es ampliamente compatible, podríamos intentar atribuir un patrón, parece forzar el keyboard numérico en Ipads (no hay dispositivo Apple para verificar) pattern = "[0-9] *"

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

¿Alguien podría comprobar si el violín funciona como se esperaba con un dispositivo Apple? No tengo ninguno. Gracias.

 $('.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"> 

¿Qué hay de esto?

 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);