Js perfect implementation @ mentioned Friends special effects (compatible with various browsers)

Js perfect implementation @ mentioned Friends special effects (compatible with various browsers)

This article will share with you a special effect that uses javascript to perfectly implement @ friends auto-prompting compatible with various browsers. It is based on the effect of Baidu Post bars and is recommended to our friends, I hope you will like it.

 

 

Requirements

1. When @ is input, the matched friend menu is displayed.

2. When the cursor enters the tag containing "@ friends", the menu is displayed.

3. When you press backspace to delete a tag that contains "@ friends" in front of the cursor, a menu is displayed.

4. compatible with ie and firefox.

Specific Practices

For requirement 1, you will naturally think of binding events to the input box. Here we need to bind mousedown instead of mouseup. Because if it is mouseup, using event. preventDefault () cannot prevent keyboard input. In addition, returning false in Event Callback does not work.

After binding the mousedown event, you need to insert a custom tag containing "@ friends. Sina Weibo's input box is made of textarea and cannot know how to handle it internally. I have to check Baidu post.

You can see that the <span class = 'at'> </span> label is inserted. This should facilitate regular expression matching in the background.

Specific

 

The Code is as follows:

Vm. check_key = function (e ){
Var editor = $ ('editor'), range;
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> ");
} Else {
Document.exe cCommand ("insertHtml", false, "<span id = 'at" + at_index + "'class = 'at _ span '>@</span> ");
}
E. preventDefault ();
}
};

 

We need to insert the cursor here, So range is used.

Then the menu is displayed. The key is how to locate the menu. My practice is very spam, that is, to add an id for the inserted span, and then locate the menu based on the position of the span id. If you have a better practice, please let me know.

Specific

 

The Code is as follows:

Function at_box_show (){
Var at_pos = aveon ($ (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;
Avron. 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 (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> ");
} Else {
Document.exe cCommand ("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 locates at_box Based on the newly inserted span id, and then displays the menu. Cur_index indicates the span id where the cursor is currently located. Set this variable because the user may reverse the inserted span, while at_index is always increasing, so a variable is needed here.

The user clicks the friend item in the menu to trigger the item_click callback. In the callback, the friend name is added to the current span using innserHTML. Then the menu is hidden, at_index ++.

The above is the listener shift + @, followed by the listener backspace deletion.

 

The Code is as follows:

Function getTextBeforeCursor (containerEl ){
Var precedingChar = "", sel, range, precedingRange;
If (window. getSelection ){
Sel = window. getSelection ();
If (sel. rangeCount> 0 ){
Range = sel. getRangeAt (0). cloneRange ();
Range. collapse (true );
Range. setStart (containerEl, 0 );
PrecedingChar = range. cloneContents ();
}
} Else if (sel = document. selection )){
Range = sel. createRange ();
PrecedingRange = range. duplicate ();
PrecedingRange. moveToElementText (containerEl );
PrecedingRange. setEndPoint ("EndToStart", range );
PrecedingChar = precedingRange.html Text;
}
Return precedingChar;
}

 

GetTextBeforeCursor is used to obtain the content before the cursor. due to compatibility, this function can obtain DocumentFragment of all content before the cursor in a standard browser, and only text (not node) can be obtained in ie, however, this html string can be converted to DocumentFragment. you can change the html string to node by using parseHTML in aveon. Node can also be obtained using $ (html) [0] In jquery.

With this function, lastChild can be used to determine whether the cursor is in the lastChild of html before the cursor, And the lastChild is span.

Specific

 

The Code is as follows:

Var a = getTextBeforeCursor ($ ('editor '));
If (e. keyCode = 8 ){
If (! -[1,]) {
Var B = aveon. parseHTML (a). lastChild;
} Else {
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 );
} Else
$ ('At _ box'). style. display = 'none ';
}

 

Finally, the cursor enters the span label to display the menu. This clearly requires binding mouse events. Bind mouseup here, because if you bind mousedown, You need to click the span label again to display the menu. As for the principle, it is similar to the above.

 

The Code is as follows:

Vm. check_mouse = function (e ){
Var editor = $ ('editor'), a = getTextBeforeCursor (editor );
If (! -[1,]) {
Var B = aveon. parseHTML (getTextBeforeCursor (editor). lastChild;
} Else {
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 );
} Else
$ ('At _ box'). style. display = 'none ';
};

 

Note: If the cursor is inside the span, You need to retrieve its id. at_box locates based on this id, and also needs to reset cur_index.

As for the ajax update menu, I will stop matching the characters.

Effect

Firefox

Ie8

Ie7

Ie6

Download

The above is all the content described in this article. I hope to help you understand javascript.