يتطلب
1. عند الدخول @، تنبثق قائمة الأصدقاء المطابقة
2. عندما يدخل المؤشر إلى العلامة التي تحتوي على "Friends" ، ستظهر القائمة
3. عند الضغط على مساحة Backspace لحذف ، إذا كان المؤشر أمام العلامة التي تحتوي على "Friends" ، فستظهر القائمة.
4. متوافق مع IE ، Firefox.
ممارسات محددة
بالنسبة للمتطلبات 1 ، من الطبيعي التفكير في أحداث الربط في مربع الإدخال. هنا تحتاج إلى ربط mousedown ، وليس mouseup. لأنه إذا كان Mouseup ، فإن استخدام Event.PreventDefault () لا يمكن منع لوحة المفاتيح من إدخال @. بالإضافة إلى ذلك ، فإن استخدام Return False في عمليات الاسترجاع هنا لن يعمل.
بعد ربط حدث Mousedown ، تحتاج إلى إدراج علامة مخصصة تحتوي على "Friends". مربع الإدخال على سينا ويبو مصنوع من Textarea. لا أستطيع أن أعرف كيف يتم التعامل معه داخليًا ، لذلك يجب أن أقرأ Baidu Tieba.
يمكنك أن ترى أنه تم إدراج علامة <span class = 'at'> </span> في شريط البريد. يجب أن يكون هذا مناسبًا لمطابقة الخلفية مع التعبيرات العادية.
محدد
نسخة الكود كما يلي:
vm.check_key = function (e) {
var editor = $ ('editor') ، Range ؛
if (
if (document.selection && document.selection.creatange) {
المدى = document.selection.createRange () ؛
range.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>") ؛
}آخر{
document.execCommand ("inserthtml" ، false ، "<span id = 'at"+at_index+"' class = 'at_span'>@</span>") ؛
}
E.PreventDefault () ؛
}
} ؛
هذا يتطلب الإدراج في المؤشر ، لذلك يتم استخدام النطاق.
ثم يتم عرض القائمة ، والمفتاح هو كيفية وضعها. نهجي هو القمامة للغاية ، وهو إضافة معرف إلى المدى الذي تم إدراجه ، ثم حدد موقع القائمة وفقًا لموضع معرف SPAN. إذا كانت هناك طريقة أفضل ، فيرجى إبلاغي بذلك.
محدد
نسخة الكود كما يلي:
الدالة AT_BOX_SHOW (AT) {
var at_pos = avalon ($ (at)). position () ؛
$ ('at_box'). style.left = at_pos.left+'px' ؛
$ ('at_box'). style.top = at_pos.top+16+'px' ؛
$ ('at_box'). style.display = 'block' ؛
}
var at_index = 0 ، cur_index = 0 ؛
Avalon.define ('editor' ، function (vm) {
vm.item_click = function () {
$ ('at'+cur_index) .innerhtml = "@"+this.innerhtml ؛
$ ('at_box'). style.display = 'none' ؛
AT_INDEX ++ ؛
} ؛
vm.check_key = function (e) {
var editor = $ ('editor') ، a = getCharacterPrecedingCaret (editor) ، Range ؛
if (
if (document.selection && document.selection.creatange) {
المدى = document.selection.createRange () ؛
range.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>") ؛
}آخر{
document.execCommand ("inserthtml" ، false ، "<span id = 'at"+at_index+"' class = 'at_span'>@</span>") ؛
}
at_box_show ('at'+at_index) ؛
cur_index = at_index ؛
E.PreventDefault () ؛
}
} ؛
}) ؛
يحدد AT_SHOW_BOX AT_BOX وفقًا لمعرف SPAN الذي تم إدراجه حديثًا ، ثم يعرض القائمة. يمثل Cur_index معرف Span حيث يوجد المؤشر حاليًا. قم بتعيين هذا المتغير لأن المستخدم قد يعيد الترجيح وتغيير الإدراج ، و AT_INDEX يتزايد باستمرار ، لذلك هناك حاجة أيضًا إلى متغير هنا.
ينقر المستخدم على عنصر الصديق في القائمة لتشغيل رد الاتصال item_click. في رد الاتصال ، أضف اسم الصديق إلى المدى الحالي باستخدام inserhtml. ثم إخفاء القائمة ، AT_INDEX ++.
ما سبق هو الاستماع Shift+@، يليه الاستماع لحذف المسافة الخلفية.
نسخة الكود كما يلي:
وظيفة getTextBeforeCursor (حاوية) {
var precedingchar = "" ، sel ، range ، previdingRange ؛
if (window.getSelection) {
sel = window.getSelection () ؛
if (sel.rangeCount> 0) {
المدى = sel.getRangeAt (0) .clonerange () ؛
Range.Collapse (true) ؛
Range.setStart (حاوية ، 0) ؛
Precedchar = range.clonecontents () ؛
}
} آخر إذا ((sel = document.selection)) {
المدى = sel.createRange () ؛
PrepringRange = range.duplicate () ؛
PrevidingRange.movetoElementText (حاوية) ؛
PrecedingRange.setEndPoint ("EndTostart" ، المدى) ؛
السابق
}
العودة السابقة
}
وظيفة getTextBeforecursor هي الحصول على المحتوى قبل المؤشر. نظرًا للتوافق ، يمكن أن تحصل هذه الوظيفة على DocumentFragment التي هي كل المحتوى قبل المؤشر في متصفح قياسي ، وفي IE ، يمكنك الحصول على نص فقط (وليس العقدة). ومع ذلك ، يمكن تحويل سلسلة HTML هذه إلى DocumentFragment. في Avalon ، يمكن استخدام parsehtml لتحويل سلسلة HTML إلى عقدة. يمكنك أيضًا الحصول على العقدة باستخدام $ (HTML) [0] في jQuery.
مع هذه الوظيفة ، يمكنك استخدام LastChild لتحديد ما إذا كان المؤشر في LastChild في HTML أمام المؤشر ، وهذا LastChild هو امتداد.
محدد
نسخة الكود كما يلي:
var a = getTextBeforeCursor ($ ('editor')) ؛
if (e.KeyCode == 8) {
if (!-[1 ،]) {
var b = avalon.parsehtml (a) .lastchild ؛
}آخر{
var b = A.Lastchild ؛
}
if (b.nodeType == 1 && b.nodename == 'span') {
var id = b.id ؛
cur_index = b.id.SubString (2) ؛
AT_BOX_SHOW (B.ID) ؛
}آخر
$ ('at_box'). style.display = 'none' ؛
}
أخيرًا ، يدخل المؤشر علامة SPAN ويعرض القائمة. من الواضح أن هذا يتطلب ربط حدث الماوس. يربط Mouseup هنا ، لأنه إذا كان Mousedown ملزمًا ، فيجب عليك النقر فوق الماوس على ملصق SPAN مرة أخرى قبل عرض القائمة. أما بالنسبة للمبدأ ، فهو مشابه لما ورد أعلاه.
نسخة الكود كما يلي:
vm.check_mouse = function (e) {
var editor = $ ('editor') ، a = getTextBeforeCursor (editor) ؛
if (!-[1 ،]) {
var b = avalon.parsehtml (getTextBeforeCursor (editor)). LastChild ؛
}آخر{
var b = A.Lastchild ؛
}
if (b! = null && b.nodeType == 1 && b.nodename == 'span') {
var id = b.id ؛
cur_index = b.id.SubString (2) ؛
AT_BOX_SHOW (B.ID) ؛
}آخر
$ ('at_box'). style.display = 'none' ؛
} ؛
لاحظ أنه إذا كان المؤشر في الفترة ، فيجب إزالته ، ويجب وضع AT_BOX وفقًا لهذا المعرف ، وكذلك إعادة تعيين CUR_INDEX.
أما بالنسبة لقائمة تحديث Ajax ، فلن أقوم بمطابقة الشخصية
تأثير
Firefox
IE8
IE7
IE6
تحميل
ما سبق هو كل المحتوى الموضح في هذه المقالة. آمل أن يكون من المفيد للجميع فهم جافا سكريبت.