Artikel ini menjelaskan metode menerapkan JS untuk memasukkan konten di lokasi yang ditentukan dalam div yang dapat diedit. Sama seperti editor yang kami gunakan, kami membagikannya kepada Anda untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Pertama, biarkan div mengaktifkan mode pengeditan
Salin kode kode sebagai berikut: <Div ContentEditable = True ID = "DivTest"> </div>
Nyalakan mode pengeditan div dengan mengatur konteneditable = true. Dengan cara ini, Div dapat memasukkan konten seperti kotak teks.
Tidak ada lagi yang banyak bicara. Berikut adalah cara mendapatkan atau mengatur posisi kursor.
2 Langkah:
① Dapatkan posisi kursor di div
② Ubah posisi kursor
Salin kode sebagai berikut: var kursor = 0; // posisi kursor
document.onselectionchange = function () {
var range = document.selection.createrange ();
var srcele = range.parentElement (); // Dapatkan elemen saat ini
var copy = document.body.createTextrange ();
copy.movetoElementText (srcele);
untuk (kursor = 0; copy.comPareEndPoints ("startToStart", range) <0; kursor ++) {
copy.movestart ("karakter", 1); // Ubah posisi kursor, pada kenyataannya, kami merekam jumlah kursor.
}
}
Bind The Cursor Change Event ke Dokumen. Digunakan untuk merekam posisi kursor.
Dengan cara ini Anda bisa mendapatkan posisi kursor div.
Salin kode sebagai berikut: function moveend (obj) {
lytxt1.focus ();
var r = document.selection.createrange ();
// Karena di sini mulai bergerak dari kursor saat ini (tampaknya kotak teks dimulai dari 0.), kita perlu mendapatkan posisi kursor saat ini dan kemudian menghitung berapa banyak bit untuk bergerak, sehingga kursor dapat dipindahkan ke posisi yang diinginkan.
r.movestart ('karakter', lytxt1.innertext.length - kursor);
r.collapse (true);
R.Select ();
}
Melalui hal di atas kita dapat memindahkan kursor di div ke ujung
Contoh lengkap
Salin kode sebagai berikut: <tombol type = "tombol" onclick = "document.geteLementById ('test'). Focus (); inerththtmlatcaret ('<b> dimasukkan </b>');"> masukkan karakter </button>
<Div ContentEditable = "true" style = "Tinggi: 50px; Border: 2px solid red;" id = "test"> </div>
function inerthtmlatcaret (html) {
var sel, rentang;
if (window.getSelection) {
// IE9 dan non -e
sel = window.getSelection ();
if (sel.getRangeat && sel.rangecount) {
range = sel.getRangeat (0);
range.deleteContents ();
// range.createContextualFragment () akan berguna di sini tetapi
// non-standar dan tidak didukung di semua browser (IE9, untuk satu)
var el = document.createelement ("div");
el.innerhtml = html;
var fragment = document.createDocumentFragment (), node, lastNode;
while ((node = el.firstchild)) {
lastNode = fragment.appendChild (node);
}
range.insertnode (frag);
// pertahankan seleksi
if (lastNode) {
range = range.clonearing ();
range.setStartafter (lastNode);
range.collapse (true);
sel.removeallranges ();
sel.addrange (rentang);
}
}
} else if (document.selection && document.selection.type! = "control") {
// yaitu <9
document.selection.createrange (). pastehtml (html);
}
}
Contoh lain berdasarkan jQuery
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "tipe konten">
<type script = "Text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/jQuery/1.4.2/jquery.min.js"> </cript>
<title> ContentEditable </iteme>
<tyle>
*{
Margin: 0; padding: 0;
}
.im-message-area {
Lebar: 98%;
padding: 2px;
Tinggi: 75px;
Perbatasan:#000 solid 1px;
Latar belakang: #FFF;
Font: 12px/20px Arial, "5B8B4F53";
Word-Wrap: Break-word;
overflow-y: otomatis;
Line-Height: 1;
}
.ul {display: none;}
.ul li {
Latar Belakang-Color: #CCC;
Lebar: 50px;
}
</tyle>
<bahasa skrip = "javascript" type = "text/javascript">
fungsi inimage (teks) {
var obj = $ (". Im-message-area") [0];
rentang var, simpul;
if (! obj.hasfocus) {
obj.focus ();
}
if (window.getSelection && window.getSelection (). getRangeat) {
range = window.getSelection (). getRangeat (0);
range.collapse (false);
node = range.createContextualFragment (teks);
var c = node.LastChild;
range.insertnode (node);
if (c) {
range.setendafter (c);
range.setstartafter (c)
}
var j = window.getSelection ();
J.Removeallranges ();
J.Addrange (rentang);
} else if (document.selection && document.selection.createrange) {
document.selection.createrange (). pastehtml (teks);
}
}
$ (dokumen) .ready (function () {
$ ('#tombol'). Klik (function () {
$ ('. Ul'). Show ();
})
$ ('. Ul li'). masing -masing (fungsi () {
$ (this) .click (function () {
inimage ($ (ini) .text ());
})
})
});
</script>
</head>
<body>
<Div ContentEditable = "true" id = "im_message_area"> <br> </div>
<a href = "javascript: void (0)" id = "tombol"> tombol </a>
<ul>
<li> (tertawa) </li>
<li> (Cry) </li>
<li> (安) </li>
</ul>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.