最近开发类似计算器界面，需要在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. overflow:hidden真的失效了吗

    项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? 其实看似不合理的现象背后都会有其合理的解释. 我们知 ...

  2. PHP对URL设置

    一.URL规则  1.默认是区分大小写的  2.如果我们不想区分大小写可以改配置文件   'URL_CASE_INSENSITIVE'=>true,               //url不区分 ...

  3. ubuntu apt-get

    近期重新拿起linux的书看了下,整理了一下linux的命令. ubuntu预装了APT和dpkg ,“APT”是 “Advanced Package Tool”的简写,“dpkg ”是“Debian ...

  4. 搭建LNMP发布ecshop系统及压测启用opcache缓存与否的情况

    安装环境:CENTOS6.5,nginx1.6.2,php-5.5.18,mysql5.5.38 在安装软件之前安装epel源,就可以直接用yum安装libmcrypt,mhash,mcrypt等ph ...

  5. 方便mac os 10.9系统中phpstorm配置php运行环境

    自己安装php,不用mac安装,这样就有php开发环境了. 安装很简单,直接运行一个命令, 需要几分钟,请慢慢等待. curl -s http://php-osx.liip.ch/install.sh ...

  6. POJ 1442 Black Box 堆

    题目: http://poj.org/problem?id=1442 开始用二叉排序树写的,TLE了,改成优先队列,过了.. 两个版本都贴一下吧,赚稿费.. #include <stdio.h& ...

  7. php的ftp类

    1.需求 了解php的ftp使用 2.例子 使用CI封装好的ftp类库 上传 $this->load->library('ftp'); $config['hostname'] = 'ftp ...

  8. iOS性能调优

    写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

  9. SCU3502 The Almost Lucky Number

    Description A lucky number is a number whose decimal representation contains only the digits \(4\) a ...

  10. matlab学习笔记(一）单元数组

    matlab学习笔记(一)单元数组 1.floor(x) :取最小的整数 floor(3.18)=3,floor(3.98)=3 ceil(x)  :取最大的整数 ceil(3.18)=4,ceil( ...