Rumah > Artikel > hujung hadapan web > 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

WBOYasal: 2016-05-16 16:30:552648semak imbas

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:

Mula-mula dayakan DIV untuk mengedit mod

Salin kod Kod adalah seperti berikut:

< /div>

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

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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

Salin kod Kod adalah seperti berikut:

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);
}
}

Lihat contoh lain berdasarkan jquery

Salin kod Kod adalah seperti berikut:

contenteditable

*{
margin:0; padding:0;
}
.kawasan-mesej-im{
lebar:98%;
padding:2px;
ketinggian:75px;
sempadan:#000 pepejal 1px;
latar belakang:#fff;
fon:12px/20px arial,"5b8b4f53";
word-wrap:break-word;
limpahan-y:auto;
ketinggian garis:1;
}
.ul{display:none;}
.ul li{
warna latar belakang:#CCC;
lebar:50px;
}