奇技淫巧——在textarea中插入文本

最新推荐文章于 2021-04-05 18:31:14 发布

韭菜的故事

最新推荐文章于 2021-04-05 18:31:14 发布

阅读量7.4k

点赞数 2

分类专栏：前端应用

本文链接：https://blog.csdn.net/qq_37952101/article/details/81213356

版权

前端应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文首发我的简书

今天在看自己的记录时发现在几个月前的一个项目中碰到一个这样的需求：做一些简单的计算按钮，点击这些按钮之后就在后面的输入框中显示对应的计算方法，对于一些函数类的计算方法需要将光标定位在括号里面，效果如下图：

当时也是第一次碰到这种需求，我搜集了网络上的一些资料最终解决这个问题，现将这个小技巧整理一下以备日后查阅。
本文的关键点：在光标后插入文本的方法（来源https://blog.csdn.net/liushuijinger/article/details/48834541）

        function insertAtCursor(myField, myValue) {
            //IE 浏览器  
            if (document.selection) {  
                myField.focus();  
                sel = document.selection.createRange();
                sel.text = myValue;  
                sel.select();  
            }
             //FireFox、Chrome等  
            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) + myValue + myField.value.substring(endPos, myField.value.length);  
                if (restoreTop > 0) {  
                    myField.scrollTop = restoreTop;  
                }  
                myField.focus();  
                myField.selectionStart = startPos + myValue.length;  
                myField.selectionEnd = startPos + myValue.length;
            } else {  
                myField.value += myValue;
                myField.focus();
            }  
        }

该方法中有两个参数myField与myValue，前者指当前输入框dom元素，类似jQuery中的$('textarea')[0],第二个参数myValue指的是需要插入的字符串。而这个方法做了什么事呢，首先它获取了当前textarea/input中的光标位置，然后在这个位置上插入了一段字符串，最后记录了光标变更后的位置。
本文的另一个关键点——设置光标的位置(点击某些带括号的方法，光标在括号中)

        function setCaretPosition(textDom, pos){
            if(textDom.setSelectionRange){//chrome/firefox
                textDom.focus();
                textDom.setSelectionRange(pos,pos);
            }else if (textDom.createTextRange) {//IE
                var range = textDom.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }

该方法的第一个参数表示当前显示内容的输入框dom元素，第二个参数表示光标要偏移的量（number）。（以上方法根据度娘搜索整合）
最后附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            margin-top: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <button class="calcbtn easycalc addFunc">加</button>
    <button class="calcbtn easycalc cutFunc">减</button>
    <button class="calcbtn easycalc multiFunc">乘</button>
    <button class="calcbtn easycalc divisionFunc">除</button>
    <button class="calcbtn abs">绝对值</button>
    <button class="calcbtn pow2">平方</button>
    <button class="calcbtn pow-2">开方</button><br/>
    <textarea id="logicScript" type="text" placeholder="请点击上方辅助按钮或直接输入计算方法"></textarea><br>
    <input type="text" id="text">
    <button id="insertbtn">点击插入文本</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function(){
            $('.calcbtn').on('click',function(){
                if($(this).hasClass('easycalc')){
                    if($(this).hasClass('addFunc')){
                        var str = '+';
                    }else if($(this).hasClass('cutFunc')){
                        var str = '-';
                    }else if($(this).hasClass('multiFunc')){
                        var str = '*';
                    }else if($(this).hasClass('divisionFunc')){
                        var str = '/';
                    }
                    var oriStr = $('#logicScript').val();
                    $('#logicScript').val(oriStr+str);
                    $('#logicScript')[0].focus();
                }else if($(this).hasClass('abs')){
                    var str = 'abs()';
                    handlelogicScript(str,-1);
                }else if($(this).hasClass('pow2')){
                    var str = 'pow(,2)';
                    handlelogicScript(str,-3);
                }else if($(this).hasClass('pow-2')){
                    var str = 'sqrt()';
                    handlelogicScript(str,-1);
                }
            })
            $('#insertbtn').on('click',function(){
                var myField = $('#logicScript')[0];
                var myValue = $('#text').val();
                insertAtCursor(myField,myValue);
            })
        // 设置光标位置
        function setCaretPosition(textDom, pos){
            if(textDom.setSelectionRange){//chrome/firefox
                textDom.focus();
                textDom.setSelectionRange(pos,pos);
            }else if (textDom.createTextRange) {//IE
                var range = textDom.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }
        //获取光标的位置
        function getCursortPosition(textDom){
            var cursorPos = 0;
            cursorPos = textDom.selectionStart;
            return cursorPos;
        }
        //处理显示的内容
        function handlelogicScript(str,offset){
            var oriStr = $('#logicScript').val();
            $('#logicScript').val(oriStr+str);
            var target = $('#logicScript')[0]
            target.focus();
            //获取光标最初的位置(末尾)
            var oriPos = getCursortPosition(target);
            //设置光标真正的位置
            var pos = oriPos+offset;
            setCaretPosition(target,pos);
        }

        //在光标后插入文本
        function insertAtCursor(myField, myValue) {
            //IE 浏览器  
            if (document.selection) {  
                myField.focus();  
                sel = document.selection.createRange();
                sel.text = myValue;  
                sel.select();  
            }
             //FireFox、Chrome等  
            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) + myValue + myField.value.substring(endPos, myField.value.length);  
                if (restoreTop > 0) {  
                    myField.scrollTop = restoreTop;  
                }  
                myField.focus();  
                myField.selectionStart = startPos + myValue.length;  
                myField.selectionEnd = startPos + myValue.length;
            } else {  
                myField.value += myValue;
                myField.focus();
            }  
        }  
    })
</script>
</body>
</html>

韭菜的故事

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
奇技淫巧——在textarea中插入文本

本文首发我的简书今天在看自己的记录时发现在几个月前的一个项目中碰到一个这样的需求：做一些简单的计算按钮，点击这些按钮之后就在后面的输入框中显示对应的计算方法，对于一些函数类的计算方法需要将光标定位在括号里面，效果如下图：当时也是第一次碰到这种需求，我搜集了网络上的一些资料最终解决这个问题，现将这个小技巧整理一下以备日后查阅。本文的关键点：在光标后插入文本的方法（来源http...
复制链接

扫一扫

专栏目录