Heim
Web-Frontend
js-Tutorial
JS-Methode zum Einfügen von Inhalten an der Cursorposition in bearbeitbare div_javascript-Skills
Web-Frontend
js-Tutorial
JS-Methode zum Einfügen von Inhalten an der Cursorposition in bearbeitbare div_javascript-Skills
JS-Methode zum Einfügen von Inhalten an der Cursorposition in bearbeitbare div_javascript-Skills
div
js
内容
可编辑
插入
Das Beispiel in diesem Artikel beschreibt die js-Methode zum Einfügen von Inhalten an einer bestimmten Position in einem bearbeitbaren Div, genau wie der von uns verwendete Editor, und wird als Referenz für alle freigegeben. Die spezifische Implementierungsmethode lautet wie folgt:
Aktivieren Sie zunächst den DIV-Bearbeitungsmodus
Code kopieren Der Code lautet wie folgt:
< /div>
Aktivieren Sie den Bearbeitungsmodus des Div, indem Sie contenteditable=true festlegen. Auf diese Weise kann das DIV Inhalte wie ein Textfeld eingeben.
Nicht mehr über das Thema reden. Hier erfahren Sie, wie Sie die Cursorposition ermitteln oder festlegen.
2 Schritte:
① Ermitteln Sie die Cursorposition in DIV
② Cursorposition ändern
Code kopieren Der Code lautet wie folgt:
var Cursor = 0; // Cursorposition
document.onselectionchange = function () {
var range = document.selection.createRange();
var srcele = range.parentElement(); //Das aktuelle Element abrufen
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; Cursor ) {
copy.moveStart("character", 1); //Ändern Sie die Cursorposition. Tatsächlich zeichnen wir die Anzahl der Cursor auf.
}
}
document.onselectionchange = function () {
var range = document.selection.createRange();
var srcele = range.parentElement(); //Das aktuelle Element abrufen
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; Cursor ) {
copy.moveStart("character", 1); //Ändern Sie die Cursorposition. Tatsächlich zeichnen wir die Anzahl der Cursor auf.
}
}
Binden Sie das Cursoränderungsereignis an das Dokument. Wird zum Aufzeichnen der Cursorposition verwendet.
Auf diese Weise können Sie die Cursorposition des DIV ermitteln.
Code kopieren Der Code lautet wie folgt:
Funktion moveEnd(obj) {
lyTXT1.focus();
var r = document.selection.createRange();
//Da die Bewegung hier beim aktuellen Cursor beginnt (es scheint, dass das Textfeld bei 0 beginnt), müssen wir die aktuelle Cursorposition ermitteln und dann berechnen, wie viele Positionen wir verschieben müssen, damit wir uns bewegen können Bewegen Sie den Cursor auf den gewünschten Ort
r.moveStart('character', lyTXT1.innerText.length - Cursor);
r.collapse(true);
r.select();
}
lyTXT1.focus();
var r = document.selection.createRange();
//Da die Bewegung hier beim aktuellen Cursor beginnt (es scheint, dass das Textfeld bei 0 beginnt), müssen wir die aktuelle Cursorposition ermitteln und dann berechnen, wie viele Positionen wir verschieben müssen, damit wir uns bewegen können Bewegen Sie den Cursor auf den gewünschten Ort
r.moveStart('character', lyTXT1.innerText.length - Cursor);
r.collapse(true);
r.select();
}
Durch das Obige können wir den Cursor im DIV an das Ende bewegen
Ein vollständiges Beispiel
Code kopieren Der Code lautet wie folgt:
Funktion insertHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 und Nicht-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() wäre hier nützlich, ist aber
// Nicht standardmäßig und nicht in allen Browsern unterstützt (z. B. IE9)
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);
// Auswahl beibehalten
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
Sehen Sie sich ein weiteres Beispiel basierend auf jquery an
Code kopieren Der Code lautet wie folgt:
*{
margin:0;padding:0;
}
.im-message-area{
Breite: 98 %;
Polsterung:2px;
Höhe:75px;
border:#000 solid 1px;
Hintergrund:#fff;
Schriftart:12px/20px arial,"5b8b4f53";
Zeilenumbruch:Wortumbruch;
overflow-y:auto;
Zeilenhöhe:1;
}
.ul{display:none;}
.ul li{
Hintergrundfarbe:#CCC;
Breite:50px;
}
按钮
- (笑)
- (哭)
- (乐)