Méthode JS pour insérer du contenu à la position du curseur dans les compétences div_javascript modifiables-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 16:30:55

original

2664 Les gens l'ont consulté

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 :

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 :

contenteditable

按钮

(笑)

(哭)

(乐)

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