最近开发类似计算器界面，需要在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>