最近开发类似计算器界面，需要在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. 安装mod_deflate模块启用apache的GZIP压缩

    安装mod_deflate模块启用apache的GZIP压缩 操作系统:Linux Cent OS 5 / Max OS X 10.6 snow leopard相关环境:Apache httpd 2. ...

  2. Omnithreadlibary学习(2)-IOmniTask异步执行

    1.使用 procedure Parallel.Async(task: TProc; taskConfig: IOmniTaskConfig); 匿名委托访问网站 program main; {$AP ...

  3. Ubuntu15.10 编译VLC Android（安卓）过程记录

    持续更新中... 最后一次修改于 2016-03-20 15:33:45 1.必要库的安装 除基本编译环境(gcc.g++等外),需要额外安装如下的库(用于下载必要的依赖文件) (1)JDK 推荐安装 ...

  4. 菜鸟Android之路(上)

    自己为什么要学android 本人作为应届毕业生,自己进入社会前做过好多梦,可是呢,现实还是打败了无邪!!面对社会的压力和残酷的竞争力自己如何生成下去??我自己对自己说:第一步 先养活自己,才能走好以 ...

  5. 哈希，哈希表，哈希Map

    数组: 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1):数组的特点是:寻址容易,插入和删除困难: 链表: 链表存储区间离散,占用内存比较宽松,故空间复杂 ...

  6. COGS 577 蝗灾 [CDQ分治入门题]

    题目链接 昨天mhr神犇,讲分治时的CDQ分治的入门题. 题意: 你又一个w*w正方形的田地. 初始时没有蝗虫. 给你两个操作: 1. 1 x y z: (x,y)这个位置多了z只蝗虫. 2. 2 x ...

  7. uva 1400 - "Ray, Pass me the dishes!"

    又是一道线段树区间更新的题: #include<cstdio> #include<algorithm> #include<cstring> #define ll l ...

  8. Hicharts弄个样例

    前端的事情,但最好自己要了解一下,能作个最简单的东东出来... 样例,需要的时候,用用,就喟给它一样模板数据即可. PYTHON,把字典的键值和KEY值匹配成列表即可. $(function () { ...

  9. PHP 文件上传注意一个地方，移动文件时要保证目标目录存在，否则报错

    move_uploaded_file ( $_FILES ["file"] ["tmp_name"], "upload/" . $fileN ...

  10. 单位有b\B\K\M\G的相互转换

    计算机存储计量单位 1． 计算机最小存储计量单位是:BIT(位) 2． 计算机最基本存储计量单位是:Bytes(字节) 3． Bit和Bytes的关系:8Bit=1Bytes 4． 其他常用单位:1K ...