仿新浪微博@功能 JS的实现 ——使用JQ At.js 和HTML5 contentEditable

项目需求 增加@功能

先上效果图

Atwho.js  gitHub地址   https://github.com/ichord/At.js

需要引入的JS：

  <script type="text/javascript" src="jquery.caret.js"></script>    // 这个JS插件用来获取光标位置
  <script type="text/javascript" src="dist/js/jquery.atwho.js"></script> // 这个就是atJS了   

这里是atjs的一些默认配置项 

你可以使用普通的input框   而我们这里用的是H5的  contentEditable  这个神奇而又强大的属性  

附上W3C的连接：

http://www.w3school.com.cn/html5/att_global_contenteditable.asp

这里是我写的一个demo

  <style type="text/css">
    .inputor {
      height: 160px;