จำเป็นต้อง
1. เมื่อป้อน @เมนูเพื่อนที่ตรงกันจะปรากฏขึ้น
2. เมื่อเคอร์เซอร์เข้าสู่แท็กที่มี "@friends" เมนูจะปรากฏขึ้น
3. เมื่อกด backspace เพื่อลบถ้าเคอร์เซอร์อยู่ด้านหน้าของแท็กที่มี "@friends" เมนูจะปรากฏขึ้น
4. เข้ากันได้กับ IE, Firefox
การปฏิบัติเฉพาะ
สำหรับข้อกำหนด 1 เป็นเรื่องธรรมดาที่จะคิดถึงเหตุการณ์ที่มีผลผูกพันกับกล่องอินพุต ที่นี่คุณต้องผูก Mousedown ไม่ใช่ Mouseup เพราะถ้าเป็น Mouseup ให้ใช้ Event.preventDefault () ไม่สามารถป้องกันไม่ให้แป้นพิมพ์เข้า @ นอกจากนี้การใช้ Return False ในการโทรกลับเหตุการณ์ที่นี่จะไม่ทำงาน
หลังจากเชื่อมโยงเหตุการณ์ Mousedown คุณจะต้องแทรกแท็กที่กำหนดเองที่มี "@friends" กล่องอินพุตบน Sina Weibo ทำด้วย textarea ฉันไม่รู้ว่ามันได้รับการจัดการภายในอย่างไรดังนั้นฉันต้องอ่าน Baidu Tieba
คุณจะเห็นว่าแท็ก <span class = 'at'> </span> ถูกแทรกลงในแถบโพสต์ สิ่งนี้ควรสะดวกสำหรับการจับคู่พื้นหลังกับนิพจน์ทั่วไป
เฉพาะเจาะจง
การคัดลอกรหัสมีดังนี้:
vm.check_key = function (e) {
var editor = $ ('editor'), ช่วง;
if (E.ShiftKey && E.KeyCode == 50) {
if (document.selection && document.selection.createrange) {
range = document.selection.createrange ();
range.pastehtml ("<span id = 'ที่"+at_index+"' class = 'at_span'>@</span>");
}อื่น{
document.execcommand ("inserthtml", false, "<span id = 'ที่"+at_index+"' class = 'at_span'>@</span>");
-
E.preventDefault ();
-
-
สิ่งนี้ต้องการการแทรกที่เคอร์เซอร์ดังนั้นจึงใช้ช่วง
จากนั้นเมนูจะปรากฏขึ้นคีย์คือวิธีการจัดตำแหน่ง วิธีการของฉันคือขยะมากซึ่งคือการเพิ่ม ID ลงในช่วงที่แทรกแล้วค้นหาเมนูตามตำแหน่งของ ID Span หากมีวิธีที่ดีกว่าโปรดแจ้งให้เราทราบ
เฉพาะเจาะจง
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น at_box_show (at) {
var at_pos = avalon ($ (at)). ตำแหน่ง ();
$ ('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 = 'ไม่มี';
at_index ++;
-
vm.check_key = function (e) {
var editor = $ ('editor'), a = getCharacterprecenedCaret (ตัวแก้ไข), ช่วง;
if (E.ShiftKey && E.KeyCode == 50) {
if (document.selection && document.selection.createrange) {
range = document.selection.createrange ();
range.pastehtml ("<span id = 'ที่"+at_index+"' class = 'at_span'>@</span>");
}อื่น{
document.execcommand ("inserthtml", false, "<span id = 'ที่"+at_index+"' class = 'at_span'>@</span>");
-
at_box_show ('at'+at_index);
cur_index = at_index;
E.preventDefault ();
-
-
-
AT_SHOW_BOX ค้นหา at_box ตาม ID Span ID ที่แทรกใหม่จากนั้นแสดงเมนู CUR_INDEX แสดงถึง SPAN ID ซึ่งปัจจุบันเคอร์เซอร์ตั้งอยู่ ตั้งค่าตัวแปรนี้เนื่องจากผู้ใช้อาจย้อนกลับและเปลี่ยนช่วงที่แทรกและ AT_INDEX เพิ่มขึ้นอย่างต่อเนื่องดังนั้นจึงจำเป็นต้องมีตัวแปรที่นี่
ผู้ใช้คลิกที่รายการเพื่อนในเมนูเพื่อทริกเกอร์รายการโทรกลับ item_click ในการโทรกลับเพิ่มชื่อเพื่อนลงในช่วงปัจจุบันโดยใช้ InserHTML จากนั้นซ่อนเมนู at_index ++
ด้านบนคือการฟัง Shift+@ตามด้วยการฟังการลบ backspace
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getTextBeForEcursor (containerel) {
var prevedchar = "", sel, ช่วง, precedingRange;
if (window.getSelection) {
sel = window.getSelection ();
if (sel.rangecount> 0) {
range = sel.getRangeat (0) .clonerange ();
range.collapse (จริง);
range.setStart (containerel, 0);
precedchar = range.clonecontents ();
-
} อื่นถ้า ((sel = document.selection)) {
range = sel.createrange ();
PrecedingRange = range.duplicate ();
PrecedingRange.MovetOelementText (containerel);
PremedingRange.SetEndpoint ("EndTostart", ช่วง);
ก่อนหน้านี้ char = precedingRange.htmltext;
-
กลับมาก่อนหน้า
-
ฟังก์ชั่นของ GetTextBeforEcursor คือการรับเนื้อหาก่อนเคอร์เซอร์ เนื่องจากความเข้ากันได้ฟังก์ชั่นนี้สามารถรับเอกสารที่เป็นเนื้อหาทั้งหมดก่อนที่เคอร์เซอร์ในเบราว์เซอร์มาตรฐานและใน IE คุณจะได้รับข้อความเท่านั้น (ไม่ใช่โหนด) อย่างไรก็ตามสตริง HTML นี้สามารถแปลงเป็น documentFragment ใน Avalon สามารถใช้ Parsehtml เพื่อเปลี่ยนสตริง HTML เป็นโหนดได้ นอกจากนี้คุณยังสามารถรับโหนดได้โดยใช้ $ (HTML) [0] ใน jQuery
ด้วยฟังก์ชั่นนี้คุณสามารถใช้ LastChild เพื่อตรวจสอบว่าเคอร์เซอร์อยู่ใน LastChild ใน HTML ที่ด้านหน้าของเคอร์เซอร์และ LastChild นี้เป็นช่วง
เฉพาะเจาะจง
การคัดลอกรหัสมีดังนี้:
var a = getTextBeforEcursor ($ ('editor'));
if (e.keycode == 8) {
ถ้า (!-[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 = 'ไม่มี';
-
ในที่สุดเคอร์เซอร์จะเข้าสู่ฉลาก Span และแสดงเมนู สิ่งนี้เห็นได้ชัดว่าต้องมีผลผูกพันกับเหตุการณ์เมาส์ Mouseup ถูกผูกไว้ที่นี่เพราะหาก Mousedown ถูกผูกไว้คุณต้องคลิกเมาส์บนฉลาก SPAN อีกครั้งก่อนที่จะสามารถแสดงเมนูได้ สำหรับหลักการมันคล้ายกับข้างต้น
การคัดลอกรหัสมีดังนี้:
vm.check_mouse = function (e) {
var editor = $ ('editor'), a = getTextBeforEcursor (Editor);
ถ้า (!-[1,]) {
var b = avalon.parsehtml (getTextBeforeCursor (บรรณาธิการ)). 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 = 'ไม่มี';
-
โปรดทราบว่าหากเคอร์เซอร์อยู่ในช่วงจะต้องลบออกและ AT_BOX จะต้องอยู่ในตำแหน่งตาม ID นี้และรีเซ็ต CUR_INDEX
สำหรับเมนูอัพเดท AJAX ฉันจะไม่ทำการจับคู่อักขระ
ผล
Firefox
IE8
IE7
IE6
การดาวน์โหลด
ข้างต้นเป็นเนื้อหาทั้งหมดที่อธิบายไว้ในบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเข้าใจ JavaScript