تصف هذه المقالة طريقة تنفيذ JS لإدراج المحتوى في موقع محدد في Div قابل للتحرير. تمامًا مثل المحرر الذي نستخدمه ، نشاركه معك للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
أولاً ، دع Div تمكين وضع التحرير
انسخ رمز الرمز على النحو التالي: <div contertIdable = true id = "divtest"> </viv>
قم بتشغيل وضع التحرير لـ Div عن طريق ضبط Contatedable = True. وبهذه الطريقة ، يمكن لـ DIV إدخال محتوى مثل مربع النص.
لا مزيد من الحديث. هنا هو كيفية الحصول على أو تعيين موضع المؤشر.
2 الخطوات:
① احصل على موقف المؤشر في Div
② تغيير موقف المؤشر
انسخ الكود على النحو التالي: var cursor = 0 ؛ // موقف المؤشر
document.OnselectionChange = function () {
var range = document.selection.createRange () ؛
var srcele = range.parentElement () ؛ // احصل على العنصر الحالي
var copy = document.body.createTexTrange () ؛
copy.movetoElementText (srcele) ؛
لـ (cursor = 0 ؛ copy.compareendpoints ("startTostart" ، المدى) <0 ؛ cursor ++) {
copy.movestart ("الحرف" ، 1) ؛ // تغيير موضع المؤشر ، في الواقع ، نحن نسجل عدد المؤشرات.
}
}
ربط حدث تغيير المؤشر إلى المستند. تستخدم لتسجيل موقف المؤشر.
بهذه الطريقة يمكنك الحصول على موضع المؤشر من Div.
انسخ الرمز كما يلي: وظيفة MoveNd (OBJ) {
lytxt1.focus () ؛
var r = document.selection.createRange () ؛
// لأنه يبدأ هنا في الانتقال من المؤشر الحالي (يبدو أن مربع النص يبدأ من 0.) ، نحتاج إلى الحصول على موضع المؤشر الحالي ثم حساب عدد البتات التي يجب تحريكها ، بحيث يمكن نقل المؤشر إلى الموضع المطلوب.
R.Movestart ('حرف' ، lytxt1.innertext.length - المؤشر) ؛
R.Collapse (صحيح) ؛
R.Select () ؛
}
من خلال ما سبق يمكننا تحريك المؤشر في DIV حتى النهاية
مثال كامل
انسخ الرمز كما يلي: <button type = "button" onClick = "document.getElementById ('test'). focus () ؛
<div contatedible = "true" style = "الارتفاع: 50 بكسل ؛ الحدود: 2px Red Solid ؛" id = "test"> </viv>
دالة inserthtmlatcaret (html) {
فار سيل ، المدى ؛
if (window.getSelection) {
// IE9 وغير IE
sel = window.getSelection () ؛
if (sel.getRangeAt && sel.rangeCount) {
المدى = sel.getRangeAt (0) ؛
Range.DeleteContents () ؛
// range.createContextualFragment () سيكون مفيدًا هنا ولكن
// غير قياسي وغير مدعوم في جميع المتصفحات (IE9 ، لأحد)
var el = document.createElement ("div") ؛
el.innerhtml = html ؛
var fragment = document.createdocumentFragment () ، node ، lastNode ؛
بينما ((العقدة = el.firstchild)) {
mastNode = fragment.appendChild (Node) ؛
}
Range.insertNode (Frag) ؛
// الحفاظ على الاختيار
if (lastNode) {
Range = Range.Clonerange () ؛
Range.setStartAfter (lastNode) ؛
Range.Collapse (true) ؛
sel.removeallranges () ؛
sel.addrange (المدى) ؛
}
}
} آخر إذا (document.selection && document.selection.type! = "Control") {
// أي <9
document.selection.createRange (). pastehtml (html) ؛
}
}
مثال آخر يعتمد على jQuery
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html ؛ charset = utf-8" http-equiv = "content-type">
<script type = "text/javaScript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<title> contentedible </title>
<style>
*{
الهامش: 0 ؛ الحشو: 0 ؛
}
. im-message-area {
العرض: 98 ٪ ؛
الحشو: 2px ؛
الارتفاع: 75 بكسل ؛
الحدود:#000 Solid 1px ؛
الخلفية: #fff ؛
الخط: 12px/20px arial ، "5B8B4F53" ؛
Word-Wrap: كلمة استراحة ؛
فائض y: Auto ؛
ارتفاع الخط: 1 ؛
}
.ul {display: none ؛}
.
خلفية اللون: #CCC ؛
العرض: 50 بكسل ؛
}
</style>
<script language = "javaScript" type = "text/javaScript">
وظيفة inimage (نص) {
var obj = $ (". area-message-area") [0] ؛
var Range ، Node ؛
if (! obj.hasfocus) {
obj.focus () ؛
}
if (window.getSelection && window.getSelection (). getRangeat) {
المدى = window.getSelection (). getRangeat (0) ؛
Range.Collapse (false) ؛
Node = range.createContextualFragment (text) ؛
var c = node.lastchild ؛
Range.insertNode (Node) ؛
إذا (ج) {
Range.setendafter (C) ؛
Range.SetStartafter (C)
}
var j = window.getSelection () ؛
j.removeallranges () ؛
J.Addrange (المدى) ؛
} آخر إذا (document.selection && document.selection.creategh) {
document.selection.createRange (). pastehtml (text) ؛
}
}
$ (وثيقة). ready (function () {
$ ('#button'). انقر فوق (function () {
$ ('. ul'). show () ؛
})
$ ('. ul li'). كل (وظيفة () {
$ (this) .click (function () {
inimage ($ (this) .text ()) ؛
})
})
}) ؛
</script>
</head>
<body>
<div contenteded = "true" id = "im_message_area"> <br> </viv>
<a href = "javaScript: void (0)" id = "button"> زر </a>
<ul>
<li> (يضحك) </li>
<li> (صرخة) </li>
<li> (安) </li>
</ul>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.