必要とする
1. @を入力すると、一致する友達メニューがポップアップ表示されます
2。カーソルが「@friends」を含むタグに入ると、メニューがポップアップします
3.バックスペースを押して削除すると、カーソルが「@friends」を含むタグの前面がある場合、メニューがポップアップします。
4。IE、Firefoxと互換性があります。
特定のプラクティス
要件1については、入力ボックスへのバインディングイベントを考えるのは自然です。ここでは、マウスアップではなく、ムーズダウンをバインドする必要があります。 MouseUpの場合、event.preventdefault（）を使用して、キーボードが @に入るのを防ぐことができないためです。さらに、ここでのイベントコールバックでreturn falseを使用しても機能しません。
Mousedownイベントをバインドした後、「@friends」を含むカスタムタグを挿入する必要があります。 Sina Weiboの入力ボックスはTextareaで作られています。内部でどのように処理されるかわからないので、Baidu Tiebaを読む必要があります。
<span class = 'at'> </span>タグがポストバーに挿入されていることがわかります。これは、正規表現とのバックグラウンドマッチングに便利なはずです。
特定の
コードコピーは次のとおりです。
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>"）;
}それ以外{
document.execcommand（ "inserthtml"、false、 "<span id = 'at"+at_index+"' class = 'at_span'>@</span>"）;
}
E.PreventDefault（）;
}
};
これにはカーソルに挿入する必要があるため、範囲が使用されます。
次に、メニューが表示されます。キーは、配置方法です。私のアプローチは非常にゴミです。これは、挿入されたスパンにIDを追加し、スパンIDの位置に応じてメニューを見つけることです。より良い方法があれば、私に知らせてください。
特定の
コードコピーは次のとおりです。
関数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）、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>"）;
}それ以外{
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は、新しく挿入されたスパンIDに従ってAT_BOXを見つけ、メニューを表示します。 cur_indexは、カーソルが現在配置されているスパンIDを表します。ユーザーが挿入されたスパンを巻き戻して変更する可能性があるため、この変数を設定し、AT_INDEXが常に増加しているため、ここでも変数も必要です。
ユーザーはメニューの友達アイテムをクリックして、item_clickコールバックをトリガーします。コールバックで、InserHTMLを使用して友人の名前を現在のスパンに追加します。次に、メニュー、at_index ++を非表示にします。
上記は、リスニングシフト+@で、その後、バックスペースの削除をリスニングします。
コードコピーは次のとおりです。
関数getTextBeForeCursor（containerel）{
var pergiongchar = ""、sel、range、perightrange;
if（window.getSelection）{
sel = window.getSelection（）;
if（sel.rangecount> 0）{
range = sel.getRangeat（0）.clonerange（）;
range.collapse（true）;
range.setstart（containerel、0）;
PERULTHAR = range.cloneContents（）;
}
} else if（（sel = document.selection））{
range = sel.createrange（）;
PERUGHTRANGE = range.duplicate（）;
pightingrange.movetoelementText（containerel）;
PergherRange.setEndPoint（ "endtostart"、範囲）;
先行char = pergheringrange.htmltext;
}
前の返品;
}
GetTextBeForeCursorの機能は、カーソルの前にコンテンツを取得することです。互換性のため、この関数は、標準ブラウザーのカーソルの前のすべてのコンテンツであるドキュメントフラージュを取得できます。IEでは、テキストのみを取得できます（ノードではありません）。ただし、このHTML文字列はドキュメントフラグメントに変換できます。 Avalonでは、ParseHTMLを使用してHTML文字列をノードに変換できます。 jqueryで$（html）[0]を使用してノードを取得することもできます。
この関数を使用すると、LastChildを使用して、カーソルがカーソルの前のHTMLのラストチャイルドにあるかどうかを判断できます。このラストチャイルドは範囲です。
特定の
コードコピーは次のとおりです。
var a = getTextBeForeCursor（$（ 'Editor'））;
if（e.keycode == 8）{
if（！ - [1、]）{
var b = avalon.parsehtml（a）.lastchild;
}それ以外{
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）;
}それ以外
$（ 'at_box'）。style.display = 'none';
}
最後に、カーソルはスパンラベルに入り、メニューを表示します。これには明らかにマウスイベントを結合する必要があります。 Mouseupはここでバインドされています。なぜなら、Mousedownがバインドされている場合、メニューを表示する前にスパンラベルのマウスを再度クリックする必要があるためです。原則に関しては、上記に似ています。
コードコピーは次のとおりです。
vm.check_mouse = function（e）{
var editor = $（ 'editor'）、a = getTextBeForeCursor（Editor）;
if（！ - [1、]）{
var b = avalon.parsehtml（getTextBeForeCursor（編集者））。lastChild;
}それ以外{
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）;
}それ以外
$（ 'at_box'）。style.display = 'none';
};
カーソルがスパンにある場合は、削除する必要があり、at_boxはこのIDに従って配置し、cur_indexをリセットする必要があることに注意してください。
Ajaxアップデートメニューについては、キャラクターマッチングは行いません
効果
Firefox
IE8
IE7
IE6
ダウンロード
上記は、この記事で説明されているすべてのコンテンツです。誰もがJavaScriptを理解することが役立つことを願っています。