Erfordern
1. Beim Eingeben @taucht das passende Freundesmenü auf
2. Wenn der Cursor in das Tag mit "@friends" eintritt, wird das Menü angezeigt
3. Wenn das Löschen von Backspace gedrückt wird, wird das Menü angezeigt, wenn der Cursor vor dem Tag "@friends" enthält.
4. Mit IE, Firefox kompatibel.
Spezifische Praktiken
Für Anforderungen 1 ist es natürlich, an Bindungsereignisse an den Eingangsfeld zu denken. Hier müssen Sie Mousedown binden, nicht MouseUp. Denn wenn es sich um Mausup handelt, kann die Tastatur mit Event.PreventDefault () nicht verhindern, dass die Tastatur @eingeben. Darüber hinaus funktioniert die Verwendung von Return Falsch in Ereignisrückrufen hier nicht.
Nachdem Sie das MouseDown -Ereignis gebunden haben, müssen Sie ein benutzerdefiniertes Tag mit "@friends" einfügen. Das Eingabefeld von Sina Weibo wird mit Textbereich hergestellt. Ich kann nicht wissen, wie es intern behandelt wird, also muss ich Baidu Tieba lesen.
Sie können sehen, dass die <span class = 'at'> </span> Tag in die Postleiste eingefügt wurde. Dies sollte bequem für den Hintergrund mit regulären Ausdrücken sein.
Spezifisch
Die Codekopie lautet wie folgt:
vm.check_key = function (e) {
var editor = $ ('editor'), Bereich;
if (e.Shiftkey && e.keycode == 50) {
if (document.Selection && document.Selection.createrange) {
Range = document.Selection.Createrange ();
Bereich.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}anders{
document.execcommand ("Inserthtml", false, "<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}
E.PreventDefault ();
}
};
Dies erfordert das Einfügen in den Cursor, sodass die Reichweite verwendet wird.
Dann wird das Menü angezeigt, der Schlüssel ist, wie man es positioniert. Mein Ansatz ist ein sehr Müll, bei dem es darum geht, der eingefügten Spanne eine ID hinzuzufügen und dann das Menü gemäß der Position der Span -ID zu finden. Wenn es einen besseren Weg gibt, lassen Sie es mich bitte wissen.
Spezifisch
Die Codekopie lautet wie folgt:
Funktion 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), Bereich;
if (e.Shiftkey && e.keycode == 50) {
if (document.Selection && document.Selection.createrange) {
Range = document.Selection.Createrange ();
Bereich.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}anders{
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 findet AT_BOX gemäß der neu eingefügten Span -ID und wird dann das Menü angezeigt. cur_index repräsentiert die Span -ID, in der sich der Cursor derzeit befindet. Stellen Sie diese Variable fest, da der Benutzer die eingefügte Spanne zurückspulen und ändern kann, und AT_Index nimmt ständig zu, sodass hier auch eine Variable benötigt wird.
Der Benutzer klickt auf das Freund Element im Menü, um den Item_click -Rückruf auszulösen. Fügen Sie im Rückruf den Namen des Freundes mit InserHTML in die aktuelle Spanne hinzu. Verstecken Sie dann das Menü AT_INDEX ++.
Das obige ist das Hörschalt+@, gefolgt von der Löschung nach Rücktaste.
Die Codekopie lautet wie folgt:
Funktion getTextBeForeCursor (Contatorel) {
var voraberhöhe = "", Sel, Bereich, Vorabzug;
if (window.getSelection) {
sel = window.getSelection ();
if (sel.rangeCount> 0) {
Bereich = sel.getRangeat (0) .clonerange ();
Range.Collapse (wahr);
Range.SetStart (Container, 0);
PrecedChar = Bereich.Clonecontents ();
}
} else if ((sel = document.Selection)) {
Range = sel.createrange ();
voredRange = Bereich.Duplicate ();
präghedRange.movetoelementText (contatorel);
prädingRange.setendpoint ("endTostart", Bereich);
voraberhöhle = prägrownrange.htmlText;
}
Rückkehr vor dem Charakter;
}
Die Funktion von GetTextBeForecuror ist, den Inhalt vor dem Cursor zu erhalten. Aufgrund der Kompatibilität kann diese Funktion eine Dokumentfragment erhalten, die den gesamten Inhalt vor dem Cursor in einem Standardbrowser ist, und in IE können Sie nur einen Text erhalten (nicht einen Knoten). Diese HTML -Zeichenfolge kann jedoch in DocumentFragment konvertiert werden. In Avalon kann ParsoTML verwendet werden, um die HTML -Zeichenfolge in Knoten zu verwandeln. Sie können auch einen Knoten erhalten, indem Sie $ (HTML) [0] in JQuery verwenden.
Mit dieser Funktion können Sie LastChild verwenden, um festzustellen, ob sich der Cursor im LastChild im HTML vor dem Cursor befindet, und dieses LastChild ist eine Spanne.
Spezifisch
Die Codekopie lautet wie folgt:
var a = getTextBeForeCursor ($ ('editor'));
if (e.keycode == 8) {
if (!-[1,]) {
var b = avalon.parsehtml (a) .lastchild;
}anders{
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);
}anders
$ ('at_box'). style.display = 'none';
}
Schließlich tritt der Cursor in das Span -Label ein und zeigt das Menü an. Dies erfordert offensichtlich die Bindung des Mausereignisses. Mausup ist hier gebunden, denn wenn MouseDown gebunden ist, müssen Sie erneut auf die Maus auf das Span -Etikett klicken, bevor das Menü angezeigt werden kann. Was das Prinzip betrifft, ähnelt es dem oben genannten.
Die Codekopie lautet wie folgt:
vm.check_mouse = function (e) {
var editor = $ ('editor'), a = getTextBeForeCursor (Editor);
if (!-[1,]) {
var b = avalon.parsehtml (getTextBeForecursor (Editor)). LastChild;
}anders{
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);
}anders
$ ('at_box'). style.display = 'none';
};
Beachten Sie, dass der Cursor, wenn er in der Spanne ist, entfernt werden muss und die AT_Box nach dieser ID positioniert werden muss und auch cur_index zurückgesetzt werden muss.
Was das AJAX -Update -Menü betrifft, werde ich den Charakter -Matching nicht durchführen
Wirkung
Firefox
IE8
IE7
dh6
herunterladen
Das obige ist alle in diesem Artikel beschriebenen Inhalte. Ich hoffe, es wird für alle hilfreich sein, JavaScript zu verstehen.