zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    javascript 压缩空格代码演示
    javascript 正则表达式代码
    数据筛选和排序
    实现win的on程序数据更新
    使用listview控件展示数据
    初始windows程序
    构建布局良好的windows程序
    ADO.NET访问数据库
    模糊查询
    基本查询
  • 原文地址:https://www.cnblogs.com/haha12/p/4711399.html
Copyright © 2011-2022 走看看