原生JavaScript 处理 动态光标 插入 文字

原生JavaScript 处理 动态光标 插入 文字

Arthur
2021-08-19 / 0 评论 / 75 阅读 / 正在检测是否收录...

原生JavaScript 处理 动态光标 插入 文字

鼠标点哪插哪

code:

<!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>
0
如果你觉得文章还不错,可以请我喝杯咖啡啊哈哈哈
wechat alipay

评论 (0)

取消