web-dev-qa-db-fra.com

Arrête le curseur de sauter à la fin du champ de saisie dans JavaScript remplacer

J'utilise une expression régulière pour supprimer les caractères non valides d'une zone de saisie de texte en javascript (s'exécutant dans IE). J'exécute la fonction de remplacement sur chaque événement keyup. Cependant, cela fait que le curseur saute à la fin de la zone de texte après chaque pression sur une touche, rendant l’édition en ligne impossible. 

La voici en action:

http://jsbin.com/ifufuv/2

Est-ce que quelqu'un sait comment faire en sorte que le curseur ne saute pas à la fin de la zone de saisie?

javascriptreplace
33
Petey B

Vous devrez remettre manuellement le curseur là où vous le souhaitez. Pour IE9, définissez .selectionStart et .selectionEnd (ou utilisez .setSelectionRange(start, end)). Pour IE8 et les versions antérieures, utilisez .createTextRange() et appelez .moveStart() dans la plage de texte.

14
gilly3

En plus de la réponse de gilly3 , j'ai pensé que quelqu'un pourrait trouver utile de voir un extrait de code.

Dans l'exemple ci-dessous, la propriété selectionStart est extraite de l'élément input avant la manipulation de chaîne JavaScript. Alors selectionStart est remis à la position initiale après la manipulation.

Selon vos objectifs, vous pouvez également accéder à selectionEnd au lieu de selectionStart et définir une plage: 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" />

22
Josh Crozier

Je rencontrais le même problème, j'ai trouvé https://www.sitepoint.com/6-jquery-cursor-functions/ j'avais la solution. Voici 6 méthodes qui vous permettront d’obtenir/définir la position du curseur dans une entrée/zone de texte. Je pense que cela fonctionnera également pour les champs modifiables de contenu!

Cela a été très utile car le bogue ne s’affichait que pour les combinaisons IE et Windows 7. 

Voici mon code avant

$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, '- '));
});

et mon code après qui utilise les méthodes jquery que j'ai trouvées sur le site Web que j'ai indiqué ci-dessus 

$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);
});
0
Mike