最近开发类似计算器界面，需要在textarea中编辑公式，涉及到 在光标位置插入 字符。
效果如下：
+ - * / 添加文字
html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
</head>
<body>
<textarea rows="8" cols="35" id="areaId"> </textarea>
<p></p>
<button class="btn btn-sm btn-purple" onclick="addExpressContent(‘+‘)">+</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent(‘-‘)">-</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent(‘*‘)">*</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent(‘/‘)">/</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent(‘测试文字‘)">添加文字</button>
<script>
/**
* 添加内容
*/
function addExpressContent(str){
var obj = document.getElementById("areaId");
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === ‘number‘ && typeof obj.selectionEnd === ‘number‘) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var cursorPos = startPos;
var tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
</script>
</body>
</html>
时间： 2024-10-07 19:08:21