Weibo @ symbol user name prompt effect. (Who Do You Want ?)

Enter "@" in the text box below to check the effect!

The compatibility of mainstream IE, FF, and CHORME browsers has been solved. If you need this JavaScript code, you can use it directly.

I cannot insert this effect into this article. Therefore, you can only download the demo files.

Download demo files

 
IdeasYou can use the onkeyup event monitoring text box to check whether a @ symbol is entered. If yes, find the absolute position of the @ symbol on the page. A prompt is displayed. (Various problems may occur in the actual production process)Problem: The cursor position in textarea cannot be obtained directly.So we can only go forward.Fix the pop-up box

First, you have some operations on the textarea (this is a very troublesome tag) label in the webpage.

So you must collect some of his APIs. (Provided below)

A: It is A textarea.

B: current cursor position

 

Our solution is to first create a (C) DIV with the visibility: hidden; (placeholder but not displayed) attribute on the page.

Its position, width, and height are the same as those in the text box (which means that C and A are already overlapped ).

Then we get all the text in front of Position B (which can be obtained using js), write it to C, and append a <span id = 'fff'> </span>;

The position of the span tag with id fff is B.

Some such labels are added to the HTML page.
<Div id = "c"> This Is A textarea @ <span id = 'fff'> </span> <div>

The @ symbol can be obtained. Other problems are debugging issues. You can download the source code directly.
Operations of textarea
Copy codeThe Code is as follows:
/*
* TT textarea operation function
* Info (t) Basic Information
* GetCursorPosition (t) cursor position
* SetCursorPosition (t, p): Set the cursor position
* Add (t, txt) content to the cursor
*/
Var TT = {
Info: function (t ){
Var o = t. getBoundingClientRect ();
Var w = t. offsetWidth;
Var h = t. offsetHeight;
Return {top: o. top, left: o. left, width: w, height: h };
},
GetCursorPosition: function (t ){
If (document. selection ){
T. focus ();
Var ds = document. selection;
Var range = null;
Range = ds. createRange ();
Var stored_range = range. duplicate ();
Stored_range.moveToElementText (t );
Stored_range.setEndPoint ("EndToEnd", range );
T. selectionStart = stored_range.text.length-range. text. length;
T. selectionEnd = t. selectionStart + range. text. length;
Return t. selectionStart;
} Else return t. selectionStart
},
SetCursorPosition: function (t, p ){
Var n = p = 'end '? T. value. length: p;
If (document. selection ){
Var range = t. createTextRange ();
Range. moveEnd ('character ',-t. value. length );
Range. moveEnd ('character ', n );
Range. moveStart ('character ', n );
Range. select ();
} Else {
T. setSelectionRange (n, n );
T. focus ();
}
},
Add: function (t, txt ){
Var val = t. value;
Var wrap = wrap | '';
If (document. selection ){
Document. selection. createRange (). text = txt;
} Else {
Var cp = t. selectionStart;
Var ubbLength = t. value. length;
T. value = t. value. slice (0, t. selectionStart) + txt + t. value. slice (t. selectionStart, ubbLength );
This. setCursorPosition (t, cp + txt. length );
};
},
Del: function (t, n ){
Var p = this. getCursorPosition (t );
Var s = t. scrollTop;
T. value = t. value. slice (0, p-n) + t. value. slice (p );
This. setCursorPosition (t, p-n );
D. FF & setTimeout (function () {t. scrollTop = s}, 10 );
}
}

Main JS
Copy codeThe Code is as follows:
Var AutoTips = function (){
Var elem = A. id? D. $ (A. id): A. elem;
Var checkLength = 5;
Var _ this = {};
Var key = '';
_ This. start = function (){
If (! D. $ (config. boxID )){
Var h = html. slice ();
Var info = TT.info (elem );
Var div = D. DC ('div ');
Var bs = D. BS ();
H = h. replace ('$ top $', (info. top + bs. top )).
Replace ('$ left $', (info. left + bs. left )).
Replace ('$ width $', info. width ).
Replace ('$ height $', info. height ).
Replace ('$ SCTOP $', '0 ');
Div. innerHTML = h;
Document. body. appendChild (div );
} Else {
_ This. updatePosstion ();
}
}
_ This. keyupFn = function (e ){
Var e = e | window. event;
Var code = e. keyCode;
If (code = 38 | code = 40 | code = 13 ){
If (code = 13 & D. $ (config. wrap). style. display! = 'None '){
_ This. enter ();
}
Return false;
}
Var cp = TT. getCursorPosition (elem );
If (! Cp) return _ this. hide ();
Var valuep = elem. value. slice (0, cp );
Var val = valuep. slice (-checkLength );
Var chars = val. match (/(\ w + )? @ (\ W +) $ | @ $ /);
If (chars = null) return _ this. hide ();
Var char = chars [2]? Chars [2]: '';
D. $ (config. valuepWrap ). innerHTML = valuep. slice (0, valuep. length-char. length ). replace (/\ n/g, '<br/> ').
Replace (/\ s/g, '') + config. positionHTML;
_ This. showList (char );
}
_ This. showList = function (char ){
Key = char;
Var data = DS. inquiry (friendsData, char, 5 );
Var html = listHTML. slice ();
Var h = '';
Var len = data. length;
If (len = 0) {_ this. hide (); return ;}
Var reg = new RegExp (char );
Var em = '<em>' + char + '</em> ';
For (var I = 0; I <len; I ++ ){
Var hm = data [I] ['user']. replace (reg, em );
H + = html. replace (/\ $ ACCOUNT \ $ | \ $ NAME \ $/g, data [I] ['name']).
Replace ('$ SACCOUNT $', hm). replace ('$ ID $', data [I] ['user']);
}
_ This. updatePosstion ();
Var p = D. $ (config. position). getBoundingClientRect ();
Var bs = D. BS ();
Var d = D. $ (config. wrap). style;
D. top = p. top + 20 + bs. top + 'px ';
D. left = p. left-5 + 'px ';
D. $ (config. listWrap). innerHTML = h;
_ This. show ();
}

_ This. KeyDown = function (e ){
Var e = e | window. event;
Var code = e. keyCode;
If (code = 38 | code = 40 | code = 13 ){
Return selectList. selectIndex (code );
}
Return true;
}
_ This. updatePosstion = function (){
Var p = TT.info (elem );
Var bs = D. BS ();
Var d = D. $ (config. boxID). style;
D. top = p. top + bs. top + 'px ';
D. left = p. left + bs. left + 'px ';
D. width = p. width + 'px ';
D. height = p. height + 'px ';
D. $ (config. boxID). scrollTop = elem. scrollTop;
}
_ This. show = function (){
SelectList. list = D. $ (config. listWrap). getElementsByTagName ('lil ');
SelectList. index =-1;
SelectList. _ this = _ this;
_ This. cursorSelect (selectList. list );
Elem. onkeydown = _ this. KeyDown;
D. $ (config. wrap). style. display = 'block ';
}
_ This. cursorSelect = function (list ){
For (var I = 0; I <list. length; I ++ ){
List [I]. onmouseover = (function (I ){
Return function () {selectList. setSelected (I )};
}) (I );
List [I]. onclick = _ this. enter;
}
}
_ This. hide = function (){
SelectList. list = null;
SelectList. index =-1;
SelectList. _ this = null;
D. ER (elem, 'keylow', _ this. keydown );
D. $ (config. wrap). style. display = 'none ';
}
_ This. bind = function (){
Elem. onkeyup = _ this. keyupFn;
Elem. onclick = _ this. keyupFn;
Elem. onblur = function () {setTimeout (_ this. hide, 100 )}
// Elem. onkeyup = fn;
// D. EA (elem, 'keyup', _ this. keyupFn, false)
// D. EA (elem, 'keyup', fn, false)
// D. EA (elem, 'click', _ this. keyupFn, false );
// D. EA (elem, 'blur', function () {setTimeout (_ this. hide, 100)}, false );
}
_ This. enter = function (){
TT. del (elem, key. length, key );
TT. add (elem, selectList. list [selectList. index]. getElementsByTagName ('A') [0]. rel + '');
_ This. hide ();
Return false;
}
Return _ this;
}

Author: idche