Question

搜索了一个体面的@take / #tag contenteditable div解决方案的高低，我正着手建立一个。

在一个keyup事件处理程序中，我使用范围选择技巧来获取当前光标位置，从中我可以确定输入的最后两个字符。例如，我正在使用它来查看是否输入了一个后跟@的空格来知道何时调用自动完成。我需要能够可靠地获取当前光标位置，以便我可以使用箭头键点击该区域来处理所有令人讨厌的退格情况。

我遇到的问题是，在我的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'

慢慢打字就可以了。

在keyup事件有机会发生之前，选择似乎已经更新。

所以问题是，当有人输入真的很快时，如何准确地确定光标在一个可信的div中的位置（以及所述光标位置周围的字符）？或者甚至更好，是否有更好的方法以严格的跨浏览器方式实现这一目标？

我尝试过的大多数其他@提及/标记插件都遇到了同样的问题。然而，Facebook没有。无论我输入的速度有多快，它都可以正常工作，所以显然有更好的方法。

我正在Linux下使用Chrome进行测试。

event.keyCode！=快速键入时当前选择指向的字符。

0 个答案: