html实现功能实现原理,web 前端 @ 功能 JS 实现分析及其原理

最近为实现一个新功能弄的焦头烂额 @xxx 的实现，在实现后写下些心得，供以后会跳入这坑的同志们参考。

首先，当让是考虑使用范围，由于项目仅仅需要考虑在 WEBKIT 环境下使用，所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在Mozilla 开发者网络上发现 selection 和 range 这两个关于选区对象和光标对象，结合 Caret(一个用于判断当前光标位置的 JS 插件)后，一个大致的雏形就浮现出来。

大概就长这样：

先整理思路，捋一捋实现步骤。

大致思路如下：

键入 @ 后将选择框显示出来

将焦点定位在弹出框中的搜索框中

点击选择框中的选项时，返回输入框

输入框中显示 @xxx

将光标定位在 @xxx 之后

删除 @xxx 时需要整个 @xxx 一起删除

由于项目使用了 angular 来构建，所以给的 demo 也是用 angular 来搭建的，但是不论用什么框架，想法有了，那么一切就好办了。

selection 和 range 对象的具体使用请参考 MDN 上的相关文章：

selection

range

DEMO页

主要涉及的几个方法：

getSelection(window.getSelectio)：获取光标所在的区域(一个div或是一个textarea)；

selection.getRangeAt：获取光标所在区域中光标选区的信息；

range.setStart：设置光标选区的起始位置；

range.setEnd：设置光标选区的结束位置；

range.deleteContents：将光标选区选中的内容删除；

range.insertNode：在光标选区中添加内容；

selection.extend：将选区的焦点移动到一个特定的位置；

selection.collapseToEnd：将当前的选区折叠到最末尾的一个点。

html 结构

       

•            
•                
  所有人