多行文本框中光标位置插入字符

最新推荐文章于 2024-06-13 07:15:00 发布

狗_都不做前端

最新推荐文章于 2024-06-13 07:15:00 发布

阅读量152

点赞数

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44423437/article/details/128849455

版权

vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    <form id="form">-->
        <textarea  id="text"></textarea>
<!--    </form>-->

   <div class="btn">姓名</div>
    <div class="btn">手机号</div>
    <div class="btn">感悟</div>
    <script>
        //获取文本框光标位置
        function getCaretPosition(obj) {
            var result = 0;
            if(obj.selectionStart >= 0) { //IE以外
                result = obj.selectionStart;
            } else { //IE
                try {
                    var rng;
                    if(obj.tagName == "textarea") { //TEXTAREA
                        rng = event.srcElement.createTextRange();
                        rng.moveToPoint(event.x, event.y);
                    } else { //Text
                        rng = document.selection.createRange();
                    }
                    rng.moveStart("character", -event.srcElement.value.length);
                    result = rng.text.length;
                } catch(e) {
                    throw new Error(10, "asdasdasd");
                }
            }
            return result;
        }
        // 指定位置插入
        let insertStr = (soure,start, newStr) => {
            return soure.slice(0, start) + newStr + soure.slice(start)
        }
        //设置文本框光标位置
        function setCaretPosition(tObj, sPos) {
            if(tObj && sPos) {
                if(tObj.setSelectionRange) {
                    setTimeout(function() {
                        tObj.setSelectionRange(sPos, sPos);
                        tObj.focus();
                    }, 0);
                } else if(tObj.createTextRange) {
                    var rng = tObj.createTextRange();
                    rng.move('character', sPos);
                    rng.select();
                }
            }
        }
        document.querySelectorAll('.btn').forEach(item=>{
            item.onclick = function(){
                var input = document.getElementById('text');
                let text = input.value
                console.log(text,input,item.innerHTML)
                let num = getCaretPosition(input)
                console.log(text[num])
                let n =  insertStr(text,num,'{'+item.innerHTML+'}')
                input.value = n
                setCaretPosition(input,num + item.innerHTML.length + 2)
            }
        })
        document.getElementById('text').addEventListener('input',function (e) {
            if(e.data == '{' || e.data == '}'){
                alert('违规字符！')

                let input = document.getElementById('text');

                let text = input.value
                console.log(text,e.data)
                input.value = text.slice(0,text.length - 1)
                return false
            }



        })

    </script>
</body>
</html>