3

在高低搜索了一个像样的@mention/#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 事件有机会触发之前，似乎选择正在更新。

所以问题是，当有人打字非常快时，我如何才能准确地确定光标在 contenteditable div 中的位置（以及围绕所述光标位置的字符）？或者更好的是，有没有更好的方法以严格的跨浏览器方式来实现相同的目标？

我尝试过的大多数其他@mention/tagging 插件都遇到了同样的问题。然而，Facebook 没有。无论我打字多快，它都能正常工作，所以显然有更好的方法。

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

4

0 回答 0