Detener el cursor de saltar al final del campo de entrada en javascript reemplazar

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 hacer que sea lo que el cursor no ir al final del cuadro de entrada?

Answer 1

Deberá colocar el cursor manualmente donde lo desee. Para IE9, configure .selectionStart y .selectionEnd (o use .setSelectionRange(start, end)). Para IE8 y versiones anteriores, use .createTextRange() y llame al .moveStart() en el rango de texto.

Answer 2

Además de gilly3's answer, pensé que a alguien podría resultarle útil ver un fragmento de código real.

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

Dependiendo de lo que estamos tratando de lograr, también se puede acceder 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" />