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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7407

15

Java チュートリアル

1631

14

CakePHP チュートリアル

1358

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1218

29

もっと見る