最近开发类似计算器界面，需要在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. MYSQL数据库备份与恢复

    mysqldump -h主机名  -P端口 -u用户名 -p密码 (–database) 数据库名 > 文件名.sql 备份MySQL数据库的命令 mysqldump -hhostname -u ...

  2. Config IIS server6.0-- HTTP 错误 500.21 - Internal Server Error 解决方案

    HTTP 错误 500.21 - Internal Server Error 解决方案         不久前重新安装了Windows7,在安装了VS2010 开发平台之后,将网站发布到IIS,访问发 ...

  3. 一个简单的makefile，一次性编译本文件夹下所有的cpp文件

    代码: CXX := g++ CFLAGS := -g TARGET := xxx.exe SRCS := $(wildcard *.cpp) OBJS := $(patsubst %cpp,%o,$ ...

  4. 监听iOS检测屏幕旋转状态，不需开启屏幕旋转－b

    -(void)rotation_icon:(float)n { UIButton *history_btn= [self.view viewWithTag:<#(NSInteger)#>] ...

  5. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  6. Python读写Redis数据库

    import redis class Database: def __init__(self): self.host = 'localhost' self.port = 6379 def write( ...

  7. DEEP LEARNING IS THE FUTURE: Q&A WITH NAVEEN RAO OF NERVANA SYSTEMS

    DEEP LEARNING IS THE FUTURE: Q&A WITH NAVEEN RAO OF NERVANA SYSTEMS CME Group was one of several ...

  8. OA学习笔记-010-Struts部分源码分析、Intercepter、ModelDriver、OGNL、EL

    一.分析 二. 1.OGNL 在访问action前,要经过各种intercepter,其中ParameterFilterInterceptor会把各咱参数放到ValueStack里,从而使OGNL可以 ...

  9. ANDROID_MARS学习笔记_S02_012_ANIMATION_利用AnimationListener在动画结束时删除或添加组件

    一.代码 1.xml(1)activity_main.xml <?xml version="1.0" encoding="utf-8"?> < ...

  10. JavaScript元素的创建、添加、删除

    <script> var x=document.getElementById("p2"); var obj=document.createElement("p ...