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

当时也是第一次碰到这种需求，我搜集了网络上的一些资料最终解决这个问题，现将这个小技巧整理一下以备日后查阅。
本文的关键点：在光标后插入文本的方法（来源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）。（以上方法根据度娘搜索整合）
最后附上完整代码

html>
    
    Document

作者：韭菜的故事
链接：https://www.jianshu.com/p/377776171a6f

ITPub博客

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

最新文章