最近在前端开发中,为实现一个新功能弄的焦头烂额
@xxx
的实现,在实现后写下些心得,供以后会跳入这坑的同志们参考。
首先,当让是考虑使用范围,由于项目仅仅需要考虑在 WEBKIT 环境下使用,所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在 Mozilla 开发者网络 上发现 selection 和 range 这两个关于选区对象和光标对象,结合 Caret (一个用于判断当前光标位置的JS插件)后,一个大致的雏形就浮现出来。
大概就长这样:
先整理思路,捋一捋实现步骤。
大致思路如下:
键入 @ 后将选择框显示出来
将焦点定位在弹出框中的搜索框中
点击选择框中的选项时,返回输入框
输入框中显示 @xxx
将光标定位在 @xxx 之后
删除 @xxx 时需要整个 @xxx 一起删除
由于项目使用了 angular 来构建,所以给的 demo 也是用 angular 来搭建的,但是不论用什么框架,想法有了,那么一切就好办了。
主要涉及的几个方法:
getSelection(window.getSelectio):获取光标所在的区域(一个div或是一个textarea);
selection.getRangeAt:获取光标所在区域中光标选区的信息;
range.setStart:设置光标选区的起始位置;
range.setEnd:设置光标选区的结束位置;
range.deleteContents:将光标选区选中的内容删除;
range.insertNode:在光标选区中添加内容;
selection.extend:将选区的焦点移动到一个特定的位置;
selection.collapseToEnd:将当前的选区折叠到最末尾的一个点。
html 结构
<div class="demo-wrap" ng-controller="Controller">
<!-- 文本输入框 -->
<div class="demo" id="demo" contenteditable="true" ng-keydown="keyIn($event)"></div>
<!-- 带有输入框的选人框 -->
<div class="select-person" id="selectPerson" ng-show="showSelect" ng-style="sPersonPosi">
<input type="text" id="searchPersonInput" ng-model="personSearchText" ng-blur="missFocus()">
首先,当让是考虑使用范围,由于项目仅仅需要考虑在 WEBKIT 环境下使用,所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在 Mozilla 开发者网络 上发现 selection 和 range 这两个关于选区对象和光标对象,结合 Caret (一个用于判断当前光标位置的JS插件)后,一个大致的雏形就浮现出来。
大概就长这样:
先整理思路,捋一捋实现步骤。
大致思路如下:
键入 @ 后将选择框显示出来
将焦点定位在弹出框中的搜索框中
点击选择框中的选项时,返回输入框
输入框中显示 @xxx
将光标定位在 @xxx 之后
删除 @xxx 时需要整个 @xxx 一起删除
由于项目使用了 angular 来构建,所以给的 demo 也是用 angular 来搭建的,但是不论用什么框架,想法有了,那么一切就好办了。
主要涉及的几个方法:
getSelection(window.getSelectio):获取光标所在的区域(一个div或是一个textarea);
selection.getRangeAt:获取光标所在区域中光标选区的信息;
range.setStart:设置光标选区的起始位置;
range.setEnd:设置光标选区的结束位置;
range.deleteContents:将光标选区选中的内容删除;
range.insertNode:在光标选区中添加内容;
selection.extend:将选区的焦点移动到一个特定的位置;
selection.collapseToEnd:将当前的选区折叠到最末尾的一个点。
html 结构
<div class="demo-wrap" ng-controller="Controller">
<!-- 文本输入框 -->
<div class="demo" id="demo" contenteditable="true" ng-keydown="keyIn($event)"></div>
<!-- 带有输入框的选人框 -->
<div class="select-person" id="selectPerson" ng-show="showSelect" ng-style="sPersonPosi">
<input type="text" id="searchPersonInput" ng-model="personSearchText" ng-blur="missFocus()">