Maison >interface Web >js tutoriel >Comment déplacer le curseur vers la fin d'un élément ContentEditable ?

Comment déplacer le curseur vers la fin d'un élément ContentEditable ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-11 01:50:02965parcourir

How to Move the Cursor to the End of a ContentEditable Element?

Déplacer le curseur vers la fin d'une entité contenteditable

Vous avez déjà rencontré le besoin de positionner le curseur à la fin d'un élément contenteditable, semblable au fonctionnalité visible dans le widget de notes de Gmail ?

La solution

Pour les éléments modifiables par le contenu, la solution de Geowa4 n'est pas applicable. Une approche sur mesure est nécessaire :

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) {
    // Modern browsers
    range = document.createRange();
    range.selectNodeContents(contentEditableElement);
    range.collapse(false);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  } else if (document.selection) {
    // IE 8 and below
    range = document.body.createTextRange();
    range.moveToElementText(contentEditableElement);
    range.collapse(false);
    range.select();
  }
}

Pour l'employer, suivez simplement l'exemple de code :

var elem = document.getElementById("txt1");
setEndOfContenteditable(elem);

Compatibilité

Cette solution est compatible avec tous les principaux navigateurs prenant en charge contenteditable.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn