最近开发类似计算器界面，需要在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在光标位置插入文字的更多相关文章

  1. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  2. textarea 在光标处插入文字

    效果演示 // 欢迎访问cssfirefly.cnblogs.com html: <textarea id="text" style="width:500px;he ...

  3. textarea光标处插入文字

    (function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...

  4. JQ在光标处插入文字

    内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...

  5. js 在光标位置插入内容

    原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...

  6. 将richTextBox中的内容写入txt文件发现不换行(解决方法)，在richTextBox指定位置插入文字

    string pathname = dt.ToString().Replace(":", ""); string str = richTextBoxResult ...

  7. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

  9. JQuery在光标位置插入内容

    (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var $t = $(this)[0]; //IE if (docume ...

随机推荐

  1. 网站加载有商务通、商桥，定义js函数触发快商通代码

    有的网站已经加载了商务通.商桥的,前期定义了js函数 触发商务通.商桥代码的,可以重新定义新的函数对之前的函数进行覆盖,其 js代码为: var domain = document.domain; / ...

  2. eclipse 启动 出现Failed to create the Java Virtual Machine" 解决方案

    方法如下: 找到eclipse目录下的eclipse.ini,可以看到如下内容:-startupplugins/org.eclipse.equinox.launcher_1.1.0.v20100507 ...

  3. uva 12124 - Assemble

    最大值最小的题: 直接用二分,比较简单: 不过我的二分老是不用好.有时间总结一下! #include<cstdio> #include<map> #include<vec ...

  4. 一篇文章让你读懂 OpenStack 的起源、架构和应用

    OpenStack 是一个面向 IaaS 层的开源项目,用于实现公有云和私有云的部署及管理.拥有众多大公司的行业背书和数以千计的社区成员, OpenStack 被看作是云计算的未来.目前 OS 基金会 ...

  5. 【网络流24题】No.16 数字梯形问题 (不相交路径 最大费用流)

    [题意] 给定一个由 n 行数字组成的数字梯形如下图所示. 梯形的第一行有 m 个数字.从梯形的顶部的 m 个数字开始,在每个数字处可以沿左下或右下方向移动, 形成一条从梯形的顶至底的路径.规则 1: ...

  6. Android使用listView，BaseAdapter实现列表页

    参考: 1.讲解很详细: blog.csdn.net/psuaije/article/details/7447391 总结: 代码:

  7. 【HDOJ】1166 敌兵布阵

    线段树. #include <stdio.h> #define maxn 55555 ]; void PushUP(int rt) { sums[rt] = sums[rt<< ...

  8. bzoj1263

    观察可得,最大的拆分方法是尽量拆成3,特殊的,如果最后剩下了1,那么就把3+1变成2+2 然后高精度计算即可 var s2,s3,i,n,l:longint;     a:..] of longint ...

  9. Node.js权威指南 (13) - 数据库访问

    13.1 在MongoDB数据库中存取数据 / 360 13.1.1 MongoDB概述 / 360 13.1.2 安装MongoDB数据库 / 360 13.1.3 安装MongoDB包 / 361 ...

  10. Node v4.1.1

    Installing Node.js via package manager curl --silent --location https://deb.nodesource.com/setup_4.x ...