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>
  • 相关阅读:
    Ztree下拉框多选
    FullCalendar日程插件
    viscose 前端常用插件
    一些词
    关于require()和export引入依赖的区别
    关于CMD/AMD和Common.js/Sea.js/Require.js
    vue中的双向数据绑定原理简单理解
    Vue-cli简单使用
    webpack简单配置
    vuex基础
  • 原文地址:https://www.cnblogs.com/haha12/p/4711399.html
Copyright © 2011-2022 走看看