最近开发类似计算器界面，需要在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. Windows命令行语法说明

    摘自:http://lavasoft.blog.51cto.com/62575/1113234   Windows命令行语法说明   说来惭愧,用windows这么多年了,对其命令行语法看得似懂非懂, ...

  2. isEqual

    "; NSString *str2 = [NSString stringWithFormat:@"%@", str1]; 大家明白, str1和str2在内存中的地址是不 ...

  3. asp.net mvc4 Controller与Action执行过程的研究（学习笔记）

    当IIS收到一个http请求,把请求信息发给对应的HttpModel(实际是实现类UrlRoutingModule),在HttpModel中会注册HttpApplication 类中的PostReso ...

  4. 30年的Hello world

    30 年的 Hello world 转载自:http://www.admin10000.com/document/2398.html 最近我在7月4日这一天所在的那周休假了.休假期间,我利用大把的时间 ...

  5. SVN版本控制与Visual Studio 2012的完美结合

    今天电脑重装了,所以vs,sqlserver,svn都得重装,因为我的公司目前使用的版本控制工具是svn.vs和sqlserver的安装均正常没有出现问题,但是在装svn的时候出了一点小插曲!svn下 ...

  6. uva 11437 - Triangle Fun

    计算几何: 直线交点: #include<cstdio> using namespace std; struct node { double x,y; node(,):x(x),y(y){ ...

  7. C语言面试题（嵌入式开发方向，附答案及点评）

    整理自C语言面试题(嵌入式开发方向,附答案及点评) 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SEC ...

  8. QLGame 2D Engine编写环境搭建

    QLGame 2D Engine编写 (win7环境搭建) 广州麒麟网络工作室,计划制作一款2d game engine,基于opengl(es)平台,暂时支持android,以后考虑支持linux, ...

  9. 李洪强iOS开发Swift篇—07_函数

    李洪强iOS开发Swift篇—07_函数 一.函数的定义 (1)函数的定义格式 1 func 函数名(形参列表) -> 返回值类型 { 2 // 函数体... 3 4 } (2)形参列表的格式 ...

  10. [wikioi]能量项链

    http://wikioi.com/problem/1154/ 这是石子归并的加强版,基本就是分治法的DP.但是有了个环,因为任何一个位置都可开始,所以就建立2*N的数组,然后对可能的区间遍历一次,就 ...