js之向div contenteditable光标位置添加字符
2021-05-04 23:28
YPE html>
标签：有一个 emoji tran 定位在 文本框 tab charset child vue
原理：
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。
当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的
当你点击一个输入框，或者你切换到别的输入框，selection是会跟着变化的。光标就是在selection里面，光标叫做range，是一个片段区域，和selection一样，有开始点，和结束点，当我们对文字按下左键向右拉的时候，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。
代码：
"en">"UTF-8">"edit" contenteditable>"text" id="emojiInput">
vue使用：
1.将lastEditRange（最后光标对象）定义为公共变量
2.在div输入框绑定click和keyup时间，然后在添加的点击事件运行函数
转载自：https://segmentfault.com/a/1190000005869372
js之向div contenteditable光标位置添加字符
标签：有一个 emoji tran 定位在 文本框 tab charset child vue
原文地址：https://www.cnblogs.com/BluceLee/p/12112452.html
上一篇：前端——JS
文章标题：js之向div contenteditable光标位置添加字符
文章链接：http://soscw.com/index.php/essay/82477.html