textarea在光标位置插入文字

最新推荐文章于 2019-08-06 22:40:00 发布

weixin_30920091

最新推荐文章于 2019-08-06 22:40:00 发布

阅读量134

点赞数

原文链接：http://www.cnblogs.com/haha12/p/4711399.html

版权

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

转载于:https://www.cnblogs.com/haha12/p/4711399.html

weixin_30920091

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
textarea在光标位置插入文字

最近开发类似计算器界面，需要在textarea中编辑公式，涉及到在光标位置插入字符。效果如下： + - * / 添加文字html代码如下：<!doctype html><html lang="en"><head> <meta charset="utf-8"> <titl...
复制链接

扫一扫