jQuery Establece el cursor al comienzo del campo de entrada en el foco

3

Tengo un campo de entrada <input value="@website.com" type="text" name="email" id="email">y quiero que cuando un usuario se enfoque en este campo, mueva el cursor para que esté antes de @website.com.

Tengo el siguiente código Javascript / jQuery pero parece que no funciona:

$(document).ready(function() {
    $("#email").focusin(function(){
        $("#email").focus();
        $("#email")[0].setSelectionRange(0,0);
    });
});

Parece que .focus()sigue llamando a la focusin()función.

Sé que $("#email")[0].setSelectionRange(0,0);es la forma correcta de mover el cursor al frente, pero ¿cómo lo enlazo cuando el campo está enfocado?

Editar: Entonces, cuando uso:

$("#email").focus(function(){
    $("#email")[0].setSelectionRange(0,0);
});

Coloca el cursor al principio cuando hago tabulación en el campo, pero no cuando hago clic.

Edit2: Esto es diferente a ingresar la descripción del enlace aquí porque eso solo obtiene la posición del intercalado mientras que yo estoy buscando establecer la posición del intercalado.

4
  • 1
    Si usted y console.log()antes de $("#email").focus();arriba verifican la consola, verán que están creando un bucle infinito haciendo un .focusmientras el focusinevento se dispara, lo que resulta en un maximum call stack size exceedederror.
    Alex
    11/07/18 a las 22:12
  • Primero ... $("#email")[0]es una abominación. Obligas a jQuery a crear un objeto ... Luego usas su [0], que es lo mismo que document.getElementById("#email"). Todo más sobre este elemento que se agregó en el objeto jQuery, lo divulga. - ¡Eso es sintácticamente un "doh!" 11/07/2018 a las 22:13
  • En el comentario anterior mío, you disclose it.debería haber sido leído you discard it.;) 11/07/2018 a las 23:16
12

Esto vinculará los eventos focusAND clickdel campo de entrada a la función. ¡Espero que esto ayude!

$('#email').on('focus click', function() {
  $(this)[0].setSelectionRange(0, 0);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Enter your name" autofocus>
<input type="text" id="email" value="@website.com">

O, sin jQuery ...

document.getElementById('email').addEventListener('click', moveCursor);
document.getElementById('email').addEventListener('focus', moveCursor);

function moveCursor(event) {
   event.target.setSelectionRange(0, 0);
}
<input type="text" placeholder="Enter your name" autofocus>
<input type="text" id="email" value="@website.com">
2
  • Eso funciona. Bien hecho. Puedes usar $(this)[0].setSelectionRange(0,0);en su lugar por cierto.
    Alex
    11/07/18 a las 22:17
  • Ah, cierto. ¡Gracias! 11/07/2018 a las 22:25
3

¿Realmente necesitas jQuery para esto?

document.getElementById("email").addEventListener("click", moveCursor);
document.getElementById("email").addEventListener("focus", moveCursor);

function moveCursor(event) {
    event.target.setSelectionRange(0,0);
}
<input value="@website.com" type="text" name="email" id="email"></input>
1

Cualquier cosa que desee realizar con un cursor necesita un enfoque de campo de todos modos.

Aquí hay un fragmento antiguo que utilizo. Incluso lo nombré cursor.jsen un subdirectorio ... Lo tomé de muchos lugares, supongo.

Es una posición del cursor para obtener / establecer . Se necesita un elemento JS. .oO ( $(el)[0]para sintaxis suelta ..)

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@[email protected]*/false || !!document.documentMode; // At least IE6


function GetCursorPos (field) {

  // Initialize
  iCaretPos = 0;

  if (isIE){

    // Set focus on the element
    field.focus();

    // To get cursor position, get empty selection range
    oSel = field.createTextRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -field.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  if (isChrome||isSafari){
    iCaretPos = field.selectionStart;
  }

  if (isFirefox){
    iCaretPos = field.selectionStart;
  }

  return iCaretPos;
}

function SetCursorPos (field,Pos) {

  // Set focus on the element
    field.focus();

  if (isIE){
    field.selectionStart=Pos;
  }

  if (isChrome||isSafari){
    field.setSelectionRange(Pos,Pos);
  }

  if (isFirefox){
    field.selectionStart=Pos;
  }

  return;
}

Acerca de las consideraciones de compatibilidad con el navegador, hay:

  1. .selectionStart - Chrome / Safari / Firefox
  2. .setSelectionRange(Pos,Pos) - Chrome / Safari / Firefox / Internet Explorer
  3. .createTextRange() -- Explorador de Internet


Una inspiración que usé allí hace mucho tiempo: parcial (en comparación con lo anterior) SO respuesta
1