ejemplo - Detener el cursor de saltar al final del campo de entrada en javascript replace

onmouseover html ejemplo

Question

Estoy usando una expresión regular para quitar los caracteres no válidos de un área de entrada de texto en javascript (ejecutándose en IE). Ejecuto la función de reemplazo en cada evento de teclado. Sin embargo, esto hace que el cursor salte al final del cuadro de texto después de cada pulsación de tecla, lo que imposibilita la edición en línea.

Aquí está en acción:

http://jsbin.com/ifufuv/2

¿Alguien sabe cómo hacerlo para que el cursor no salte al final del cuadro de entrada?

Answer 1

Además de la respuesta de gilly3 , pensé que alguien podría encontrar útil ver un fragmento de código real.

En el siguiente ejemplo, la propiedad selectionStart se recupera del elemento de input antes de la manipulación de cadenas de JavaScript. Luego selectionStart vuelve a la posición inicial después de la manipulación.

Dependiendo de lo que intente lograr, también puede acceder a selectionEnd en lugar de selectionStart , y establecer un rango: setSelectionRange(start, end) .

document.getElementById(''target'').addEventListener(''input'', function (e) {
  var target = e.target,
      position = target.selectionStart; // Capture initial position
  
  target.value = target.value.replace(//s/g, '''');  // This triggers the cursor to move.
  
  target.selectionEnd = position;    // Set the cursor back to the initial position.
});

<p>The method <code>.replace()</code> will move the cursor''s position, but you won''t notice this.</p>
<input type="text" id="target" />

Answer 2

Me encontré con el mismo problema, encontré que https://www.sitepoint.com/6-jquery-cursor-functions/ tenía la solución. Aquí hay 6 métodos que le permitirán obtener / establecer la posición del cursor en una entrada / área de texto. ¡Creo que esto también funcionará para los campos editables de contenido!

Esto fue muy útil ya que el error solo se mostró para la combinación de IE y Windows 7.

Aquí está mi código Before

$body.on(''input paste'',''.replace-special-chars'',function () {
    let coma = /‚/g;
    let doubleQuotes = /[“”]/g;
    let singleQuotes = /[‘’]/g;
    $(this).val($(this).val().replace(doubleQuotes,''"''));
    $(this).val($(this).val().replace(coma,'',''));
    $(this).val($(this).val().replace(singleQuotes,"''"));
    $(this).val($(this).val().replace(/[^/x00-/xff]/g, ''- ''));
});

y mi código posterior que utiliza los métodos jquery que encontré en el sitio web que indiqué anteriormente

$body.on(''input paste'',''.replace-special-chars'',function () {
    let position = $(this).getCursorPosition();
    let coma = /‚/g;
    let doubleQuotes = /[“”]/g;
    let singleQuotes = /[‘’]/g;
    $(this).val($(this).val().replace(doubleQuotes,''"''));
    $(this).val($(this).val().replace(coma,'',''));
    $(this).val($(this).val().replace(singleQuotes,"''"));
    $(this).val($(this).val().replace(/[^/x00-/xff]/g, ''- ''));
    $(this).setCursorPosition(position);
});

Answer 3

Tendrás que colocar manualmente el cursor donde quieras. Para IE9, configure .selectionStart y .selectionEnd (o use .setSelectionRange(start, end) ). Para IE8 y .createTextRange() anteriores, use .createTextRange() y llame a .moveStart() en el rango de texto.