欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 光标