javascript - JS输入编辑框实现输入@提示@人

Question

1、输入编辑框当输入@的时候弹出提示，类似QQ聊天输入@人的效果

<p contenteditable=true></p>

2、输入效果：

Answer 1

推荐一个我曾经贡献过代码的jquery插件（23333，也只是帮他们改了个Bug）

https://github.com/ichord/At.js
demo
Features Preview

Support IE 7+ for textarea. Supports HTML5 contentEditable elements
(NOT including IE 8) Can listen to any character and not just '@'. Can
set up multiple listeners for different characters with different
behavior and data Listener events can be bound to multiple inputors.
Format returned data using templates Keyboard controls in addition to
mouse Tab or Enter keys select the value Up and Down navigate between
values (and Ctrl-P and Ctrl-N also) Right and left will re-search the

1. Custom data handlers and template renderers using a group of

2. callbacks Supports AMD

Answer 2

我也不知道qq那个到底是怎样实现的，如果不考虑动态数据的话，静态页面就监听输入框输入onchange事件，正则匹配"@"字符，然后显示提示框，提示框的效果就不用说了吧，当然，如果你需要提示框刚好在你@字符下面，这就要需要遍历字符串+定位了，大概是这样的一个思路了，希望对你有帮助

Answer 3

https://github.com/podio/jque...