今天在看自己的记录时发现在几个月前的一个项目中碰到一个这样的需求：做一些简单的计算按钮，点击这些按钮之后就在后面的输入框中显示对应的计算方法，对于一些函数类的计算方法需要将光标定位在括号里面，效果如下图：
当时也是第一次碰到这种需求，我搜集了网络上的一些资料最终解决这个问题，现将这个小技巧整理一下以备日后查阅。
本文的关键点：在光标后插入文本的方法（来源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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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>
作者：韭菜的故事
链接：https://www.jianshu.com/p/377776171a6f
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦