Weibo における @ 記号のユーザー名プロンプト効果。 (誰のことを考えていますか?)

下のテキストボックスに「@」を入力して効果を確認してください。

IE、FF、CHORME 主流ブラウザとの互換性の問題は解決されました。この JS を必要とする友人は、それを直接使用できます。

この記事にはこのエフェクトを挿入することはできません。したがって、私がデモしたファイルを全員にダウンロードさせることしかできません。

デモファイルをダウンロードします

アイデア

onkeyup イベントを使用して、@ 記号がテキストボックスに入力されているかどうかを監視できます。入力されている場合は、ページ上の @ 記号の絶対位置が検出され、プロンプトが表示されます。 (実際の制作過程では様々な問題が発生します)

問題: テキストエリア内のカーソル位置を直接取得できません。

だから、遠回りにしか進めないんです。

ポップアップボックスの場所を解決します

まず、Web ページ内の textarea タグ (これは非常に面倒なタグです) に対していくつかの操作を実行します。

したがって、彼の API のいくつかを収集する必要があります。 (以下に提供)

A: それはテキストエリアです

B: 現在のカーソル位置

私たちの計画は、最初に、visibility:hidden; (プレースホルダーだが表示されない) 属性を持つ (C) DIV をページ上に作成することです。

その位置、幅、高さは A テキストボックスと同じです (これは、C と A が重なっていることを意味します)。

次に、位置 B より前のすべてのテキストを取得し (js で取得できます)、それを C に書き込み、; を追加します。

すると、ID FFF のspanタグの位置がBの位置になります。

HTML ページにはさらに次のようなタグがいくつかあります

これはテキストエリアです @

@ 記号の位置を取得できます。その他の問題は単なるデバッグの問題なので、詳細は説明しません。ソースコードを直接ダウンロードできます

テキストエリアの一部の操作

コードをコピーしますコードは次のとおりです:

 /* 
* TT テキストエリア操作関数
* info(t) 基本情報
* getCursorPosition(t) カーソル位置
* setCursorPosition(t, p) カーソル位置を設定
* add(t ,txt) カーソル位置にコンテンツを追加します 
*/ 
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; 
 range = ds.createRange() ; 
var storage_range = range.duplicate(); 
stored_range.setEndPoint("EndToEnd", range); = storage_range.text.length - range.text.length; 
t.selectionEnd = t.selectionStart range.text.length; 
return 
} 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); n); 
範囲 .select(); 
t.setSelectionRange(n,n); 
} 
add:function (t, txt){ 
var val = t.value; 
var Wrap = Wrap || 
if(document.selection){ 
document.selection.createRange ().text = txt; 
var cp = t.selectionStart; 
var ubbLength = t.value.length; t.selectionStart) txt t.slice(t.selectionStart, ubbLength); 
this.setCursorPosition(t, 
}, 
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); } 


メイン JS 




コードをコピー


 コードは次のとおりです。
 
var AutoTips = function(A){ 
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 ||ウィンドウ.イベント; 
var code = e.keyCode; 
if(code == 38 || code == 40 || code == 13) { 
if(code==13 && D.$(config.wrap).style.display != 'none' ){ 
_this.enter(); 
} 
 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] ?文字[2] : ''; 
D.$(config.valuepWrap).innerHTML = valuep.slice(0,valuep.length - char.length).replace(/n/g,'
')。 
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 = ''  char ''; 
for(var i=0; ivar 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 ||ウィンドウ.イベント; 
var code = e.keyCode; 
if(コード == 38 || コード == 40 || コード == 13){ 
return selectList.selectIndex(code); 
} 
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('li'); 
selectList.index = -1; 
selectList._this = _this; 
_this.cursorSelect(selectList.list); 
elem.onkeydown = _this.KeyDown; 
D.$(config.wrap).style.display = 'ブロック'; 
} 
_this.cursorSelect = function(list){ 
for(var i=0; ilist[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, 'keydown', _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) 、「クリック」、_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(); 
 false を返します。 
} 
return _this; 
} 


作者：idche 

Weibo における @ 記号のユーザー名プロンプト効果。 (誰のことを考えていますか?)_JavaScript スキル