3

適切な @mention/#tag contenteditable div ソリューションを高低で検索した結果、構築に着手しています。

keyup イベント ハンドラーで、範囲選択トリックを使用して現在のカーソル位置を取得し、そこから最後に入力された 2 文字を特定しています。たとえば、オートコンプリートを呼び出すタイミングを知るために、スペースの後に @ が入力されているかどうかを確認するために使用しています。現在のカーソル位置を確実に取得できるようにする必要があるため、矢印キーを使用してエリアをクリックするなど、面倒なバックスペースのケースをすべて処理できます。

私が抱えている問題は、keyup ハンドラーで、イベントで取得しているキーコードが入力したものと一致するが、十分に速く入力すると選択が遅れているように見えることです。

たとえば、このhttp://jsfiddle.net/puMCX/を参照してください。 

$( '#test' ).bind( 'keyup', function( event )
   {
   var range = window.getSelection().getRangeAt(0);

   console.log( "event.which char '" + String.fromCharCode( event.which ) + "' character from range :'" + $( range.startContainer ).text().charAt( range.startOffset - 1 ) + "'" );
   });

TEST をクリックして、すばやく何かを入力します。かなり速く入力すると、キーコードと選択が一致しないことに気付くでしょう。

fiddle.jshell.net:25event.which char 'T' character from range :'i'
fiddle.jshell.net:25event.which char 'H' character from range :'s'
fiddle.jshell.net:25event.which char 'I' character from range :'s'
fiddle.jshell.net:25event.which char 'S' character from range :'s'

ゆっくりタイピングしても問題なく動作します。

キーアップ イベントが発生する前に、選択が更新されているようです。

問題は、誰かが非常に速く入力したときに、コンテンツ編集可能な div 内のカーソルの位置 (およびそのカーソル位置を囲む文字) をどのように正確に判断できるかということです。またはさらに良いことに、同じ目標を達成する厳密なクロスブラウザの方法でこれを行うより良い方法はありますか?

私が試した他のほとんどの@メンション/タグ付けプラグインは、同じ問題に苦しんでいます. ただし、Facebookはそうではありません。どんなに速く入力しても、本来のように機能するので、明らかにそれを行うためのより良い方法があります.

Linux で Chrome を使用してテストしています。

4

0 に答える 0