บทความนี้อธิบายวิธีการใช้ JS เพื่อแทรกเนื้อหาในสถานที่ที่ระบุใน Div ที่แก้ไขได้ เช่นเดียวกับตัวแก้ไขที่เราใช้เราแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
ก่อนอื่นให้ Div เปิดใช้งานโหมดการแก้ไข
คัดลอกรหัสรหัสดังต่อไปนี้: <div เป็นที่ชื่นชอบ = true id = "divtest"> </div>
เปิดโหมดการแก้ไขของ DIV โดยการตั้งค่าที่เป็นจริง = จริง ด้วยวิธีนี้ DIV สามารถป้อนเนื้อหาเช่นกล่องข้อความ
ไม่มีช่างพูดอีกต่อไป นี่คือวิธีรับหรือตั้งค่าตำแหน่งเคอร์เซอร์
2 ขั้นตอน:
①รับตำแหน่งเคอร์เซอร์ใน div
②เปลี่ยนตำแหน่งเคอร์เซอร์
คัดลอกรหัสดังนี้: VAR Cursor = 0; // ตำแหน่งเคอร์เซอร์
document.onselectionChange = function () {
ช่วง var = document.selection.createrange ();
var srcele = range.parentElement (); // รับองค์ประกอบปัจจุบัน
var copy = document.body.createTextrange ();
Copy.MovetOelementText (Srcele);
สำหรับ (เคอร์เซอร์ = 0; Copy.CompareEndpoints ("StartTostart", ช่วง) <0; เคอร์เซอร์ ++) {
Copy.movestart ("ตัวละคร", 1); // เปลี่ยนตำแหน่งเคอร์เซอร์ในความเป็นจริงเรากำลังบันทึกจำนวนเคอร์เซอร์
-
-
ผูกเหตุการณ์การเปลี่ยนแปลงเคอร์เซอร์กับเอกสาร ใช้เพื่อบันทึกตำแหน่งเคอร์เซอร์
วิธีนี้คุณจะได้รับตำแหน่งเคอร์เซอร์ของ Div
คัดลอกรหัสดังต่อไปนี้: ฟังก์ชั่น Moveend (OBJ) {
lytxt1.focus ();
var r = document.selection.createrange ();
// เนื่องจากที่นี่มันเริ่มย้ายจากเคอร์เซอร์ปัจจุบัน (ดูเหมือนว่ากล่องข้อความเริ่มต้นจาก 0) เราจำเป็นต้องได้รับตำแหน่งเคอร์เซอร์ปัจจุบันจากนั้นคำนวณจำนวนบิตที่จะย้ายเพื่อให้เคอร์เซอร์สามารถย้ายไปยังตำแหน่งที่ต้องการ
R.Movestart ('ตัวละคร', lytxt1.innertext.length - เคอร์เซอร์);
R.Collapse (จริง);
R.Select ();
-
ผ่านด้านบนเราสามารถย้ายเคอร์เซอร์ใน div ไปยังจุดสิ้นสุด
ตัวอย่างที่สมบูรณ์
คัดลอกรหัสดังต่อไปนี้: <ปุ่ม type = "ปุ่ม" onclick = "document.getElementById ('ทดสอบ'). focus (); inserthtmlatcaret ('<b> แทรก </b>');"> แทรกอักขระ </button>
<div เป็นที่ชื่นชอบ = "true" style = "ความสูง: 50px; ชายแดน: 2px Solid Red;" id = "ทดสอบ"> </div>
ฟังก์ชั่น inserthtmlatcaret (html) {
var sel, ช่วง;
if (window.getSelection) {
// ie9 และไม่ใช่ ie
sel = window.getSelection ();
if (sel.getRangeat && sel.rangecount) {
range = sel.getRangeat (0);
range.deletecontents ();
// range.createContextualFragment () จะมีประโยชน์ที่นี่ แต่เป็น
// ไม่ได้มาตรฐานและไม่รองรับในเบราว์เซอร์ทั้งหมด (IE9 สำหรับหนึ่ง)
var el = document.createElement ("div");
el.innerhtml = html;
var fragment = document.createdocumentFragment (), โหนด, lastNode;
ในขณะที่ ((node = el.firstchild)) {
lastNode = fragment.appendChild (โหนด);
-
range.insertNode (FRAG);
// รักษาตัวเลือก
ถ้า (LastNode) {
range = range.clonerange ();
range.setStartaFter (LastNode);
range.collapse (จริง);
Sel.RemoveAllanges ();
sel.addrange (ช่วง);
-
-
} อื่นถ้า (document.selection && document.selection.type! = "ควบคุม") {
// เช่น <9
document.selection.createrange (). pastehtml (html);
-
-
อีกตัวอย่างหนึ่งจาก jQuery
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // 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 = "เนื้อหาประเภท">
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<title> เป็นที่ชื่นชอบ </title>
<style>
-
มาร์จิ้น: 0; การตอบสนอง: 0;
-
.IM-Message-area {
ความกว้าง: 98%;
Padding: 2px;
ความสูง: 75px;
ชายแดน:#000 ของแข็ง 1px;
ความเป็นมา: #FFF;
แบบอักษร: 12px/20px Arial, "5B8B4F53";
Word-wrap: break-word;
Overflow-y: อัตโนมัติ;
ความสูงบรรทัด: 1;
-
.ul {display: none;}
.ul li {
พื้นหลังสี: #CCC;
ความกว้าง: 50px;
-
</style>
<script language = "javascript" type = "text/javascript">
ฟังก์ชั่น inimage (ข้อความ) {
var obj = $ (". im-message-area") [0];
ช่วง var, โหนด;
ถ้า (! obj.hasfocus) {
obj.focus ();
-
if (window.getSelection && window.getSelection (). getrangeat) {
range = window.getSelection (). getrangeat (0);
range.collapse (เท็จ);
node = range.createContextualFragment (ข้อความ);
var c = node.lastchild;
range.insertNode (โหนด);
ถ้า (c) {
range.setendafter (c);
range.setStartafter (C)
-
var j = window.getSelection ();
J.RemoveAllanges ();
J.Addrange (ช่วง);
} อื่นถ้า (document.selection && document.selection.createrange) {
document.selection.createrange (). pastehtml (ข้อความ);
-
-
$ (เอกสาร) .ready (function () {
$ ('##ปุ่ม') คลิก (ฟังก์ชัน () {
$ ('. ul'). show ();
-
$ ('. ul li'). แต่ละ (ฟังก์ชั่น () {
$ (นี่) .Click (function () {
inimage ($ (นี้) .Text ());
-
-
-
</script>
</head>
<body>
<div contenteditable = "true" id = "im_message_area"> <br> </div>
<a href = "javascript: void (0)" id = "ปุ่ม"> ปุ่ม </a>
<ul>
<li> (หัวเราะ) </li>
<li> (ร้องไห้) </li>
<li> (安) </li>
</ul>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน