在＜pre＞元素作为输入框时，选择表情插入到输入框并将光标定位到表情后面

目标达成

于 2021-03-03 16:21:51 发布

阅读量1.1k

点赞数

分类专栏： JavaScript vue 文章标签：在光标处插入图片输入框中插入图片插入图片后将光标置于图片后面聊天输入框中表情图片插入的处理

本文链接：https://blog.csdn.net/liucai1018/article/details/114319825

版权

现在以pre元素作为输入框（通过contenteditable属性将pre元素变为可编辑输入框）

<pre contenteditable="true" @click="inputAreaClick" @input="inputAreaInput"  @keydown="inputAreaKeyEnter"></pre>

实现：比如我要下面这样的内容，那么页面显示如下图2：

步骤：这里的代码是适用于我这里的场景的，有些多余的代码，但思路是这个思路

1 监听输入框的点击、改变、键盘左右移动光标时，记录下光标相关的对象selection和range，统一调用下面方法进行记录

// 记录光标节点及位置
recordPositionAndNode() {
  this.selection = window.getSelection()
  this.range = wi