Comment placer le curseur à la fin du texte dans un élément modifiable dans les navigateurs ?

Définition de la position du curseur à la fin du texte dans plusieurs navigateurs

Introduction

L'insertion de nouvelles lignes et la définition de la position du curseur à la fin du texte peuvent varier selon les navigateurs . Cet article explore une solution multi-navigateurs pour définir le curseur à la fin du texte lorsqu'un bouton est cliqué.

Problème

Dans divers navigateurs comme Chrome, Firefox et IE, la façon dont le texte est stocké et affiché dans un contenu modifiable l’élément diffère. Cela peut entraîner des sauts de ligne ou un formatage indésirables.

De plus, la définition de la position du curseur à la fin du texte après un clic sur un bouton nécessite une approche cohérente dans tous les navigateurs.

Solution

La fonction JavaScript suivante fournit une solution multi-navigateurs pour placer le curseur à la fin du text:

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

La fonction prend une référence à l'élément contenteditable (el) en entrée. Il vérifie les méthodes getSelection et createRange présentes dans les navigateurs modernes. Si disponible, elle crée une plage, sélectionne tout le contenu de l'élément, réduit la plage jusqu'à la fin et définit la sélection.

Pour les navigateurs existants qui ne disposent pas de ces méthodes, la fonction utilise la méthode createTextRange pour obtenir le même effet.

Pour utiliser cette fonction, elle doit être appelée lorsque l'on clique sur le bouton, comme ceci :

$(document).ready(function() {
  $('#insert_caret').click(function() {
    var ele = $('#content');
    placeCaretAtEnd(ele);
  });
});

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!