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

程序员文章站 2024-02-11 11:23:34

...

在项目中会遇到这样的情况，用户可以在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 restoreTop = areaField.scrollTop;  // 获取滚动条高度
           //  this.waitingTextArea 是v-model的值
           // item.text 是 选择的要插入的值
            this.waitingTextArea = this.waitingTextArea.substring(0, startPos) + item.text
              + this.waitingTextArea.substring(endPos, this.waitingTextArea.length);
            if (restoreTop > 0) {
              areaField.scrollTop = restoreTop;
            }
            areaField.focus();
            areaField.selectionStart = startPos + item.text.length;
            areaField.selectionEnd = startPos + item.text.length;
          } else {
            this.waitingTextArea += item.text;
            areaField.focus();
          }

原生写法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
 
<input name="" id="txt1" cols="30" rows="10"   ：placeholder= /><br>

<input type="text" name="" id="txt2">
<input type="button" value="添加" id="btn">
<input type="button" value="获取内容" id="btn1" οnclick="get()">


<div id="thistext"></div>
<script type="text/javascript">
    window.onload = function(){
        var oTxt1 = document.getElementById("txt1");
        var oTxt2 = document.getElementById("txt2");
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function(){
            getValue("txt1", oTxt2.value);
        }
    }
</script>
<script type="text/javascript">

    function get(){
        document.getElementById("thistext").innerHTML=document.getElementById("txt1").value;
        console.log(document.getElementById("txt1").value)

    }

    //了在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数    
    //objid：textarea的id   str：要插入的内容
    function getValue(objid,str){
        var myField=document.getElementById(""+objid);
        //IE浏览器
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = str;
            sel.select();
        }

        //火狐/网景 浏览器
        else if (myField.selectionStart || myField.selectionStart == '0')
        {
            //得到光标前的位置
            var startPos = myField.selectionStart;
            //得到光标后的位置
            var endPos = myField.selectionEnd;
            // 在加入数据之前获得滚动条的高度
            var restoreTop = myField.scrollTop;
            myField.value = myField.value.substring(0, startPos) + str + myField.value.substring(endPos, myField.value.length);
            //如果滚动条高度大于0
            if (restoreTop > 0) {
                // 返回
                myField.scrollTop = restoreTop;
            }
            myField.focus();
            myField.selectionStart = startPos + str.length;
            myField.selectionEnd = startPos + str.length;
        }
        else {
            myField.value += str;
            myField.focus();
        }
    }
</script>


</body>
</html>

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

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

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

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