Méthode JS pour insérer du contenu à la position du curseur dans les compétences div_javascript modifiables

L'exemple de cet article décrit la méthode js d'insertion de contenu à une position spécifiée dans un div modifiable, tout comme l'éditeur que nous utilisons, et est partagé avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Activez d'abord le DIV pour modifier le mode

Copier le code Le code est le suivant :

< /div>

Activez le mode d'édition du div en définissant contenteditable=true De cette façon, le DIV peut saisir du contenu comme une zone de texte.
On ne parle plus du sujet. Voici comment obtenir ou définir la position du curseur.

2 étapes :

① Récupère la position du curseur dans DIV
② Changer la position du curseur

Copier le code Le code est le suivant :

var curseur = 0; // Position du curseur
document.onselectionchange = function () {
var range = document.selection.createRange();
var srcele = range.parentElement(); //Obtenir l'élément actuel
var copie = document.body.createTextRange();
copy.moveToElementText(srcele);
pour (curseur = 0; copy.compareEndPoints("StartToStart", range) < 0; curseur ) {
copy.moveStart("character", 1); //Changer la position du curseur En fait, nous enregistrons le nombre de curseurs.
>
>

Liez l’événement de changement de curseur au document. Utilisé pour enregistrer la position du curseur.
De cette façon, vous pouvez obtenir la position du curseur du DIV.

Copier le code Le code est le suivant :

function moveEnd(obj) {
lyTXT1.focus();
var r = document.selection.createRange();
// Parce que le mouvement ici commence à partir du curseur actuel (il semble que la zone de texte commence à 0.), nous devons donc obtenir la position actuelle du curseur, puis nous pouvons calculer le nombre de positions à déplacer, afin que nous puissions nous déplacer le curseur sur L'emplacement souhaité
r.moveStart('character', lyTXT1.innerText.length - curseur);
r.collapse(true);
r.select();
>

Grâce à ce qui précède, nous pouvons déplacer le curseur dans le DIV jusqu'à la fin
Un exemple complet

Copier le code Le code est le suivant :

Insérer un caractère

fonction insertHtmlAtCaret(html) {
var sel, plage ;
si (window.getSelection) {
// IE9 et non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() serait utile ici mais l'est
// non standard et non pris en charge dans tous les navigateurs (IE9, par exemple)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node ​​​​= el.firstChild) ) {
lastNode = frag.appendChild(node);
>
range.insertNode(frag);
// Conserver la sélection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(plage);
>
>
} else if (document.selection && document.selection.type != "Control") {
// IE <9
document.selection.createRange().pasteHTML(html);
>
>

Regardez un autre exemple basé sur jquery

Copier le code Le code est le suivant :

 

 按钮
 

 
• (笑)

 
• (哭)

 
• (乐)

 

希望本文所述对大家的javascript程序设计有所帮助。

Déclaration de ce site Web

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