textarea在光标位置插入文字

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

 

posted @ 2015-08-07 17:16  Java碎碎念  阅读(2144)  评论(0)  编辑  收藏  举报