Comment faire avancer automatiquement le contenu de la zone de saisie après avoir supprimé le curseur dans JS ?

Lors du développement d'applications Web, vous rencontrez souvent des scénarios dans lesquels vous devez exploiter le contenu de la zone de saisie. Parmi eux, il s'agit d'une exigence courante mais également difficile de déplacer automatiquement le contenu de la zone de saisie vers l'avant après la suppression du curseur.

Dans cet article, nous présenterons deux méthodes pour répondre à cette exigence : l'une consiste à utiliser l'API de sélection de JavaScript pour effectuer des opérations de texte, et l'autre consiste à déplacer automatiquement le contenu de la zone de saisie vers l'avant en simulant des événements de clavier.

Utiliser l'API de sélection pour la manipulation de texte

L'API de sélection est une API de manipulation de texte fournie par JavaScript, qui peut être utilisée pour obtenir et manipuler la partie de texte sélectionnée du document. Dans cette méthode, nous utiliserons l'API Selection pour implémenter la suppression et la copie du contenu textuel.

Tout d'abord, nous devons obtenir le nœud DOM de la zone de saisie et y lier un écouteur d'événement keydown pour écouter les événements de clavier. Lorsque l'utilisateur appuie sur la touche Retour arrière ou Suppr, nous effectuerons les opérations suivantes :

1. Utilisez la méthode document.getSelection() pour obtenir le texte actuellement sélectionné
2. Si le texte sélectionné est vide, cela signifie qu'un caractère avant le Le curseur doit être supprimé par La méthode modifier() de l'API de sélection réinitialise la plage de sélection pour "étendre" (c'est-à-dire le texte entre la position actuelle du curseur et la position du caractère précédent), puis utilise la méthode modifier( ) à nouveau pour réinitialiser la plage de sélection sur "déplacer" (c'est-à-dire supprimer les caractères avant le curseur)
3. Sinon, cela signifie que l'utilisateur a sélectionné une partie du texte, copié le texte sélectionné dans le presse-papiers et défini la plage de sélection pour "déplacer" pour supprimer le texte sélectionné
4. Enfin, mettez à jour la valeur de la zone de saisie et déplacez le curseur vers la bonne position

Ce qui suit est une implémentation complète :

const inputField = document.getElementById('input-field');

inputField.addEventListener('keydown', (event) => {
  const selection = document.getSelection();

  if (event.key === 'Backspace' || event.key === 'Delete') {
    const selectedText = selection.toString();

    if (selectedText === '') {
      selection.modify('extend', 'backward', 'character');
      selection.modify('move', 'backward', 'character');
    } else {
      event.clipboardData.setData('text/plain', selectedText);
      selection.deleteFromDocument();
    }

    event.preventDefault();
    inputField.value = inputField.value.substring(0, selection.anchorOffset) + 
                       inputField.value.substring(selection.focusOffset);
    selection.setPosition(selection.anchorNode, selection.anchorOffset);
  }
});

Utilisation d'événements de clavier simulés pour implémenter

La deuxième méthode d'implémentation consiste à déclencher l'événement keydown de la zone de saisie en simulant les événements du clavier, lui permettant d'avancer automatiquement. Cette méthode ne nécessite pas l’utilisation de l’API Selection et fonctionne dans tous les navigateurs.

Tout d'abord, nous devons créer un événement de clavier simulé pour simuler l'utilisateur appuyant sur la touche Retour arrière ou Suppr. Ensuite, déclenchez l'événement keydown sur la zone de saisie et effectuez les opérations suivantes dans l'écouteur d'événement :

1. Utilisez les propriétés selectionStart et selectionEnd pour obtenir la plage de texte actuellement sélectionnée. Si aucun texte n'est sélectionné, selectionStart et selectionEnd sont égaux
2. . Déterminez si l'utilisateur a appuyé sur la touche La touche est-elle sous Retour arrière ou Supprimer ? S'il s'agit de Retour arrière, diminuez selectionStart de 1, sinon augmentez selectionEnd de 1
3. Mettez à jour la valeur de la zone de saisie et réinitialisez selectionStart et selectionEnd en fonction de la position actuelle du curseur

Le code d'implémentation est le suivant :

const inputField = document.getElementById('input-field');

document.addEventListener('keydown', (event) => {
  const selectionStart = inputField.selectionStart;
  const selectionEnd = inputField.selectionEnd;

  if (event.key === 'Backspace') {
    inputField.value = inputField.value.substring(0, selectionStart - 1) + 
                       inputField.value.substring(selectionEnd);
    inputField.selectionStart = selectionStart - 1;
    inputField.selectionEnd = selectionStart - 1;
    event.preventDefault();
  } else if (event.key === 'Delete') {
    inputField.value = inputField.value.substring(0, selectionStart) + 
                       inputField.value.substring(selectionEnd + 1);
    inputField.selectionStart = selectionStart;
    inputField.selectionEnd = selectionStart;
    event.preventDefault();
  }
});

Résumé

Cet article présente deux méthodes pour implémenter JavaScript afin de déplacer automatiquement le contenu de la zone de saisie vers l'avant après la suppression du curseur. La première méthode utilise l'API Selection de JavaScript pour effectuer des opérations sur le texte, et la seconde méthode est implémentée en simulant des événements de clavier. Les deux méthodes ont leurs propres avantages et inconvénients, choisissez en fonction des besoins réels et de la compatibilité du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!