input输入框在光标处，插入文本段

最新推荐文章于 2024-08-16 11:55:27 发布

Janicelily

最新推荐文章于 2024-08-16 11:55:27 发布

阅读量3.6k

点赞数 2

分类专栏： h5 文章标签： input 光标

本文链接：https://blog.csdn.net/Beth__hui/article/details/96287764

版权

本文介绍了如何在Vue项目中实现在input或textarea光标所在位置插入文本段落的需求。通过利用document.selection（IE浏览器）和document.getElementById(xxxx).selectionStart（谷歌等浏览器）获取光标位置，结合字符串substring方法进行切割和拼接来实现。

摘要由CSDN通过智能技术生成

在项目中会遇到这样的情况，用户可以在textarea中输入，也可以选择既有的可供选择的段落，现需求是用户把光标放在哪，用户选择后的段落就插进该处位置。

实现方式主要是依靠俩点：
一、利用
doxument.selection （这是IE的）
docuemnt.getElementById(xxxx).selsectionStart （这是谷歌等的）
这俩个属性来找到光标的位置

二、就是利用字符串的substring 的方式切割再拼接；

以下是源代码

在vue项目中的代码

         const areaField = this.$refs.voicearea; // 拿到目标标签；
        
          // IE浏览器
          if (document.selection) {
            areaField.focus();
            const sel = document.selection.createRange();
            sel.text = item.text;
          } // 谷歌 Firefox 等
           else if (areaField.selectionStart || areaField.selectionStart === '0') {
            const startPos = areaField.selectionStart;
            const endPos = areaField.selectionEnd;
            const restor