Rumah >
hujung hadapan web >
tutorial js >
Kaedah JS untuk memasukkan kandungan pada kedudukan kursor dalam kemahiran div_javascript boleh diedit
Kaedah JS untuk memasukkan kandungan pada kedudukan kursor dalam kemahiran div_javascript boleh diedit
WBOY
Lepaskan： 2016-05-16 16:30:55
asal
2679 orang telah melayarinya
Contoh dalam artikel ini menerangkan kaedah js untuk memasukkan kandungan pada kedudukan tertentu dalam div boleh edit, sama seperti editor yang kami gunakan dan dikongsi dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
Hidupkan mod edit div dengan menetapkan contenteditable=true Dengan cara ini, DIV boleh memasukkan kandungan seperti kotak teks.
Tidak bercakap tentang topik itu lagi. Begini cara mendapatkan atau menetapkan kedudukan kursor.
2 langkah:
① Dapatkan kedudukan kursor dalam DIV
② Tukar kedudukan kursor
var cursor = 0; // Kedudukan kursor
document.onselectionchange = fungsi () {
julat var = document.selection.createRange();
var srcele = range.parentElement(); //Dapatkan elemen semasa
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
untuk (kursor = 0; copy.compareEndPoints("StartToStart", julat) < 0; kursor ) {
copy.moveStart("character", 1); //Tukar kedudukan kursor.
}
}
Ikat peristiwa penukaran kursor pada dokumen. Digunakan untuk merekodkan kedudukan kursor.
Dengan cara ini, anda boleh mendapatkan kedudukan kursor DIV.
function moveEnd(obj) {
lyTXT1.focus();
var r = document.selection.createRange();
//Oleh kerana pergerakan di sini bermula dari kursor semasa (nampaknya kotak teks bermula dari 0.), jadi kita perlu mendapatkan kedudukan kursor semasa, dan kemudian kita boleh mengira berapa banyak kedudukan untuk bergerak, supaya kita boleh bergerak kursor ke Lokasi yang anda mahu
r.moveStart('character', lyTXT1.innerText.length - cursor);
r.collapse(true);
r.select();
}
Melalui perkara di atas kita boleh menggerakkan kursor dalam DIV ke penghujung
Contoh lengkap
function insertHtmlAtCaret(html) {
var sel, julat;
jika (window.getSelection) {
// IE9 dan bukan IE
sel = window.getSelection();
jika (sel.getRangeAt && sel.rangeCount) {
julat = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() akan berguna di sini tetapi
// bukan standard dan tidak disokong dalam semua penyemak imbas (IE9, untuk satu)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), nod, lastNode;
manakala ( (nod = el.firstChild) ) {
lastNode = frag.appendChild(nod);
}
range.insertNode(frag);
// Kekalkan pilihan
jika (Nod terakhir) {
julat = julat.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(julat);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
