昨天有人问我这个事，今天就来做做了，最开始是按自己的思路做，在keyup事件里对输入键做判断，以处理什么退格啊，删除啊，上下左右移动等动作，然后记录光标位置来做文本处理，费了好大劲。不过后来无意中发现了【孟子E章】的一个解决方案，简洁有效。

本着研究学习的目的，我对【孟子E章】的方法做了个封装，这样在使用时会简单一些，尤其是需要插入的标签较多时。

这是调用代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type = "text/javascript" src = "JScript.js"></script> 
    
    <script type="text/javascript">  

    window.onload = function()
    {
        var ci = new CursorInsert();
        ci.SetTargetTextControl(document.getElementById('txtContent'));
        ci.SetSourceControl(document.getElementById('btnSource'), '[note]NOTE[/note]');
        
        ci.Initialize();
    }

    </script>   
</head>
<body>
    <form id="form1" runat="server">
    <textarea id = "txtContent" cols = "1" rows = "1" style = "width:500px;height:300px;"></textarea><br />
    <input id = "btnSource" type = "button" value = "Click me" />
    </form>
</body>
</html>

这是封装后的类：


var CursorInsert = function ()
{
    this.targetTextControl = null;
    this.sourceControls = new Array();
    
    this.SetTargetTextControl = function(ctrl)
    {
        this.targetTextControl = ctrl;
    }
    
    this.SetSourceControl = function(ctrl,value)
    {
        this.sourceControls[this.sourceControls.length] = {"Button" : ctrl , "Value" : value};
    }
    
    this.Initialize = function()
    {
        if (this.targetTextControl == null)
        {
            alert("Please set target text control first!");
            return ;
        }
        
        if (this.sourceControls.length == 0)
        {
            alert("Please set source control first!");
            return ;
        }
        
        this.SetText(this.targetTextControl);
        
        for (var i = 0; i < this.sourceControls.length; i++)
        {
            this.SetButton(this.sourceControls[i].Button,this.sourceControls[i].Value,this.targetTextControl);
        }
    }
    
    this.SetButton = function(btn,value,target)
    {
        var ctrl = target == null ? this.TextControl : target ;
        
        btn.onclick = function()
        {
            CursorInsert.prototype.InsertAtCaret(target,value);
        }
    }
    
    this.SetText = function(ctrl)
    {
        ctrl.onselect = function()
        {
            CursorInsert.prototype.SetCaret(this);
        }
        
        ctrl.onclick = function()
        {
            CursorInsert.prototype.SetCaret(this);
        }
        
        ctrl.onkeyup = function()
        {
            CursorInsert.prototype.SetCaret(this);
        }
    }
}

CursorInsert.prototype.SetCaret = function(textObj)
{
    if (textObj.createTextRange)   
    {  
        textObj.caretPos = document.selection.createRange().duplicate();  
    }  
}

CursorInsert.prototype.InsertAtCaret = function(textObj,value)
{
    if(document.all)
    {    
        if (textObj.createTextRange && textObj.caretPos)   
        {  
            var caretPos = textObj.caretPos;  
            caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? value + ' ' : value;  
        }
        else
        {  
            textObj.value = value;  
        }  
    }
    else
    {  
        if(textObj.setSelectionRange)
        {  
            var rangeStart = textObj.selectionStart;  
            var rangeEnd = textObj.selectionEnd;  
            var tempStr1 = textObj.value.substring(0,rangeStart);  
            var tempStr2 = textObj.value.substring(rangeEnd);  
            textObj.value = tempStr1 + value + tempStr2;  
        }
        else
        {  
            alert("This version of Mozilla based browser does not support setSelectionRange!");  
        }  
    }  
}

转载于:https://www.cnblogs.com/jxhwei/archive/2008/06/11/1217468.html

在文本框的光标处插入指定的文本（兼容IE6和Firefox）相关推荐

  1. 前端实现文本框在光标后插入图片

    为解决这个问题,我们需要先整理一下步骤: 1.从剪贴板中读出图片 2.将图片转为base64编码 3.将图片存入光标的位置 1.(1)我们可以通过设置div监听paste事件 document.que ...

  2. 文本框字符串长度实时统计jQuery插件，兼容IE6+

    效果如图: /** ====== 字符串长度实时统计插件 =====* author: Jim* version: 2.0 | 2013.12.18* ======================== ...

  3. 使用JS在textarea在光标处插入内容

    为什么80%的码农都做不了架构师?>>>    // 在光标处插入字符串// myField 文本框对象// myValue 要插入的值function insertAtCursor ...

  4. html文本框光标位置,html的文本框显示光标 如何在htmlText文本框光标处插入字符...

    HTML 如何设置文本框中光标位置和光标居中 我写样式,把文本框的宽度加大了.但是光标位置在上面. html怎么让文本框的光标出现在内容最后 HTML如何在打开页面时将光标定位在某个文本框 HTML5 ...

  5. java文本框光标后添加图片_由编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)实现的富文本编辑器...

    大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的.当然,如果要严谨的,用像uedi ...

  6. js在PageOffice打开的Word文档光标处插入书签

    在使用Word时,如果内容过多有时为了快速定位到内容的某一处或某一部分怎会在该处添加书签.Word中的书签可以通过工具栏手动添加或删除,也可以通过后台程序结合JS函数在当前光标处插入书签,或根据书签名 ...

  7. python 文本框位置_「每日一练」Python文本框的显示和插入

    Python强大之处在于对于数据的处理,而处理数据就离不开文本框,那么你知道Python中文本框是如何显示和插入吗? 案例 python文本框的显示和插入 先上代码~ 运行效果 题目详述 第一行: i ...

  8. contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作

    这周碰到一个东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区 ...

  9. 解决从光标处插入图片光标消失的问题

    最近在做一个富文本编辑器,当鼠标单击事件发生在编辑区域外以后,光标就会消失,那么execCommand()方法就不能在编辑器处执行. 此时需要记录下光标消失的位置,一下几篇博文帮助非常大,记录下,以便 ...

最新文章

  1. C语言数字图像处理编程
  2. 使用PowerDesigner 15对现有数据库进行反向工程(图解教程) by Yulh
  3. iangularjs 模板_在AngularJS中使用内联模板
  4. 学习Kotlin(八)其他技术
  5. 「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图
  6. 44 个 JavaScript 变态题解析
  7. SetProcessWorkingSetSize 函数的骗局
  8. php 新浪url,PHP URL函数详解
  9. [react] 请说说你对react的render方法的理解
  10. python 数据库的中文乱码问题
  11. 3个要点，教你设计好无限滚屏
  12. oracle----删除数据
  13. vscode 头文件包含问题_VScode编译C++ 头文件显示not found的问题
  14. caxa 拉伸命令的使用（一次拉伸很多线）
  15. excel公式编辑器_巧用Excel制作炫酷聚光灯效果，数据查看太方便了
  16. NK/DC细胞膜仿生脂质体药物载体|真核细胞膜包覆仿生纳米粒|肿瘤细胞膜包裹的仿生纳米颗粒
  17. 第十六届智能车竞赛全国总决赛究竟该怎么举办讨论中的“混沌”现象
  18. Kubernetes网络与CNI插件介绍
  19. go程序设计语言第四章-组合类型
  20. 基于STM32使用嵌套结构体摸索内存对齐

热门文章

  1. linux服务器svn安装配置
  2. 使用WebViewJavascriptBridge与UIWebView交互
  3. Linux 系统文件及结构
  4. Moorhuhn Kart 2 XXL Maps
  5. Q145： 三次曲线对比及其矩阵表示（Bezier, B-Spline, Hermite, Catmull-Rom）
  6. 汽油与消费需求问题的MonteCarlo求解方法
  7. 正在等待继续编辑 - Python - 基础知识专题 - 配置文件与日志管理
  8. php 页面上显示xls文档,phpExcel输出xls文档显示乱码的解决方法
  9. 2020考研计算机专业课,2020考研：计算机考这4个科目，各科该这样备考
  10. 计算机课评课用语,【数学评课50条】_评课常用语50条