Memerlukan
1. Saat memasuki @, menu teman yang cocok muncul
2. Saat kursor memasukkan tag yang berisi "@Friends", menu akan muncul
3. Saat menekan backspace untuk menghapus, jika kursor berada di depan tag yang berisi "@Friends", menu akan muncul.
4. Kompatibel dengan IE, Firefox.
Praktik spesifik
Untuk persyaratan 1, wajar untuk memikirkan peristiwa yang mengikat ke kotak input. Di sini Anda perlu mengikat mousedown, bukan mouseup. Karena jika mouseUp, menggunakan Event.PreventDefault () tidak dapat mencegah keyboard memasukkan @. Selain itu, menggunakan return false in event callbacks di sini tidak akan berfungsi.
Setelah mengikat acara mousedown, Anda perlu memasukkan tag khusus yang berisi "@friends". Kotak input di Sina Weibo dibuat dengan TextArea. Saya tidak tahu bagaimana itu ditangani secara internal, jadi saya harus membaca Baidu Tieba.
Anda dapat melihat bahwa tag <span class = 'at'> </span> telah dimasukkan ke dalam bilah pos. Ini harus nyaman untuk pencocokan latar belakang dengan ekspresi reguler.
Spesifik
Salinan kode adalah sebagai berikut:
vm.check_key = function (e) {
editor var = $ ('editor'), rentang;
if (e.shiftkey && e.keycode == 50) {
if (document.selection && document.selection.createrange) {
range = document.selection.createrange ();
range.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}kalau tidak{
document.execCommand ("Inserthtml", false, "<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}
e.preventdefault ();
}
};
Ini membutuhkan penyisipan di kursor, jadi rentang digunakan.
Kemudian menu ditampilkan, kuncinya adalah cara memposisikannya. Pendekatan saya sangat sampah, yaitu untuk menambahkan ID ke rentang yang dimasukkan dan kemudian menemukan menu sesuai dengan posisi ID Bentang. Jika ada cara yang lebih baik, beri tahu saya.
Spesifik
Salinan kode adalah sebagai berikut:
fungsi 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) {
editor var = $ ('editor'), a = getCharacterprecedingCaret (editor), rentang;
if (e.shiftkey && e.keycode == 50) {
if (document.selection && document.selection.createrange) {
range = document.selection.createrange ();
range.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}kalau tidak{
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 menempatkan at_box sesuai dengan ID rentang yang baru dimasukkan, dan kemudian menampilkan menu. CUR_INDEX mewakili ID rentang di mana kursor saat ini berada. Atur variabel ini karena pengguna dapat memundurkan dan mengubah rentang yang dimasukkan, dan AT_INDEX terus meningkat, sehingga variabel juga diperlukan di sini.
Pengguna mengklik item teman di menu untuk memicu panggilan balik item_click. Di panggilan balik, tambahkan nama teman ke rentang saat ini menggunakan INSerhtml. Kemudian sembunyikan menu, at_index ++.
Di atas adalah Mendengarkan Shift+@, diikuti dengan mendengarkan penghapusan backspace.
Salinan kode adalah sebagai berikut:
fungsi getTextBeforecursor (containerel) {
var proredingchar = "", sel, range, presedingrange;
if (window.getSelection) {
sel = window.getSelection ();
if (sel.rangecount> 0) {
range = sel.getRangeat (0) .clonearing ();
range.collapse (true);
range.setStart (containerel, 0);
presedchar = range.clonecontents ();
}
} else if ((sel = document.selection)) {
range = sel.createrange ();
presedingrange = range.duplicate ();
presedingrange.movetoeLementText (containerel);
presedingrange.setendpoint ("endtostart", range);
presedingchar = presedingrange.htmltext;
}
Return proredingchar;
}
Fungsi getTextBeforeCursor adalah untuk mendapatkan konten sebelum kursor. Karena kompatibilitas, fungsi ini bisa mendapatkan DocumentFragment yang merupakan semua konten sebelum kursor di browser standar, dan di IE, Anda hanya bisa mendapatkan teks (bukan simpul). Namun, string HTML ini dapat dikonversi menjadi DocumentFragment. Di Avalon, parsehtml dapat digunakan untuk mengubah string HTML menjadi node. Anda juga bisa mendapatkan node dengan menggunakan $ (html) [0] di jQuery.
Dengan fungsi ini, Anda dapat menggunakan LastChild untuk menentukan apakah kursor berada di LastChild di HTML di depan kursor, dan LastChild ini adalah rentang.
Spesifik
Salinan kode adalah sebagai berikut:
var a = getTextBeforecursor ($ ('editor'));
if (e.keycode == 8) {
if (!-[1,]) {
var b = avalon.parsehtml (a) .lastchild;
}kalau tidak{
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);
}kalau tidak
$ ('at_box'). style.display = 'none';
}
Akhirnya, kursor memasuki label rentang dan menampilkan menu. Ini jelas membutuhkan mengikat acara mouse. Mouseup terikat di sini, karena jika mousedown terikat, Anda harus mengklik mouse pada label rentang lagi sebelum menu dapat ditampilkan. Adapun prinsipnya, mirip dengan yang di atas.
Salinan kode adalah sebagai berikut:
vm.check_mouse = function (e) {
editor var = $ ('editor'), a = getTextBeforecursor (editor);
if (!-[1,]) {
var b = avalon.parsehtml (getTextBeforecursor (editor)). LastChild;
}kalau tidak{
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);
}kalau tidak
$ ('at_box'). style.display = 'none';
};
Perhatikan bahwa jika kursor berada dalam rentang, itu harus dihapus, dan AT_BOX harus diposisikan sesuai dengan ID ini, dan juga reset CUR_INDEX.
Adapun menu pembaruan AJAX, saya tidak akan melakukan pencocokan karakter
Memengaruhi
Firefox
IE8
IE7
IE6
unduh
Di atas adalah semua konten yang dijelaskan dalam artikel ini. Saya harap akan sangat membantu bagi semua orang untuk memahami JavaScript.