js表情包

效果先行

a.png

1.gif

1.conteneditable属性

传统textarea文本域不能解析标签，例如：

textarea.value+=""//输入框内仍然是，不能解析标签

自然就不能使用textarea作为文本载体了，我们可是使用conteneditable属性，它可以让你的div也具备输入功能

好，div可以输入内容了，并且插入的标签也可以解析；如果只是想在段落末尾加上表情，那你大可以这样去做：

div. innerHTML+=""

但是，你是要成为海贼王的男人，怎么能满足于此？

2.getSelection(获取selection对象)

为什么要用它？有时候我们想在光标所在位置插入标情，那这个对象里就有可以让我获取位置的方法及属性；

Selection对象所对应的是用户所选择的ranges（区域），俗称拖蓝。默认情况下，该函数只针对一个区域

在你的页面插入这段代码，当你点击的时候就会在页面弹出你所框选的内容了

document. onkeyup=function(){varword =window.getSelection?window.getSelection():document.selection.createRange().text;      alert(word)}

更细致的选取操作：

varsel =window.getSelection();varrange = sel.getRangeAt(0)//选择第一选区varimg =newImage();range.collapse(false);//对于IE来说，参数不可省略img.src="smile.gif"//创建图片节点range.insertNode(node);//插入到该选区

这样去写的话会存在一些问题；当你框选内容的时候，不会替换内容，而是在所选内容之后插入，这是因为range.collapse()方法：

range.collapse();//（false默认）到选区末端true开始位置//当你框选内容的时候，执行该方法，可以让光标移动到选区结束位置，然后插入内容

所以，当框选的时候，正常做法应该是删除框选内容，然后插入新节点

range.deleteContents();//清除内容

优化上述代码：

varsel =window.getSelection();varrange = sel.getRangeAt(0)//选择第一选区range.deleteContents();//清除选区内容varimg =newImage();range.collapse(false);//对于IE来说，参数不可省略img.src="smile.gif"//创建图片节点range.insertNode(node);//插入到该选区

完整代码

functioninsertImg(src){if(window.getSelection) {varsel =window.getSelection();varrange = sel.getRangeAt(0);varimg =newImage();        range.deleteContents()        img.src=src;        range.insertNode(img);        range.collapse(false);//对于IE来说，参数不可省略}}

2.gif

IE怎么办？

表情包去哪找？如果碰到这个问题，这篇文章就不要看了

4.gif

作者：vitor

链接：https://www.jianshu.com/p/e7478e27c1e4

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。