摘要：最近在山寨一款网页微信的产品，对于用属性做的编辑框有不少心得，希望可以帮到入坑的同学。在里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。，现在我们来实际操作光标了。
最近在山寨一款网页微信的产品，对于div用contenteditable属性做的编辑框有不少心得，希望可以帮到入坑的同学。
废话不多说了，我们先来理解一下HTML的光标对象是如何工作的，后面我会贴完整的DEMO代码，不用急，先去理解，才能做出更加好的输入体验。
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。
当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的
当你点击一个输入框，或者你切换到别的输入框，selection是会跟着变化的。光标就是在selection里面，光标叫做range，是一个片段区域，和selection一样，有开始点，和结束点，当我们对文字按下左键向右拉的时候，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。
OK，现在我们来实际操作光标了。直接看完整的代码，然后看效果吧。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79883.html
摘要：还没结束上述例子中，在输入框中表情只能以文本的形式呈现。如果想在输入框中呈现输入的表情，该怎么办呢使用属性为的容器代替是必须的，因为中只能显示文本。 在普通的 textarea 中，只能显示普通的文本。如果简单的输入文本，textarea 便足以胜任。但是实际情况往往要复杂得多。 简单版本的插入表情 常见的版本一般都是使用 textarea，然后表情使用某种约定的文本格式代替，比如你好...
摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本 使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size...
摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本 使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size...
阅读 2459·2021-11-25 09:43
阅读 423·2021-11-12 10:36
阅读 4183·2021-11-08 13:18
阅读 2034·2021-09-06 15:00
阅读 2869·2019-08-30 15:56
阅读 798·2019-08-30 13:57
阅读 1892·2019-08-30 13:48
阅读 1299·2019-08-30 11:13
