码迷,mamicode.com
首页 > 其他好文 > 详细

textarea在光标位置插入文字

时间:2015-08-07 18:51:27      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

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

 

textarea在光标位置插入文字

标签:

原文地址:http://www.cnblogs.com/haha12/p/4711399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!