用javascript获取textarea中的光标位置

对于写javascript写网页编辑器的人来说，获取textarea中的光标位置是一个非常重要的问题，而往往很多人在这个地方不知所措，找不到好的办法。昨天我在网上找到了一段javascript代码，本来不想把原版放在这里的，就是因为太精彩了，怕我给改坏了，所以还是原版放在这里吧。

var start=0;
    var end=0;
    function add(){       
        var textBox = document.getElementById("ta");
        var pre = textBox.value.substr(0, start);
        var post = textBox.value.substr(end);
        textBox.value = pre + document.getElementById("inputtext").value + post;
    }
    function savePos(textBox){
        //如果是Firefox(1.5)的话，方法很简单
        if(typeof(textBox.selectionStart) == "number"){
            start = textBox.selectionStart;
            end = textBox.selectionEnd;
        }
        //下面是IE(6.0)的方法，麻烦得很，还要计算上'\n'
        else if(document.selection){
            var range = document.selection.createRange();
            if(range.parentElement().id == textBox.id){
                // create a selection of the whole textarea
                var range_all = document.body.createTextRange();
                range_all.moveToElementText(textBox);
                //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
                //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则                //返回小于0的值，则range_all往右移一点，直到两个range的start相同。
                // calculate selection start point by moving beginning of range_all to beginning of range
                for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
                    range_all.moveStart('character', 1);
                // get number of line breaks from textarea start to selection start and add them to start
                // 计算一下\n
                for (var i = 0; i <= start; i ++){
                    if (textBox.value.charAt(i) == '\n')
                        start++;
                }
                // create a selection of the whole textarea
                 var range_all = document.body.createTextRange();
                 range_all.moveToElementText(textBox);
                 // calculate selection end point by moving beginning of range_all to end of range
                 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
                     range_all.moveStart('character', 1);
                     // get number of line breaks from textarea start to selection end and add them to end
                     for (var i = 0; i <= end; i ++){
                         if (textBox.value.charAt(i) == '\n')
                             end ++;
                     }
                }
            }
        document.getElementById("start").value = start;
        document.getElementById("end").value = end;
    }
下面是在页面中调用js代码的方法：

<form action="a.cgi">
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>start: <input type="text" id="start" size="3"/></td>
        <td>end: <input type="text" id="end" size="3"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <textarea id="ta" onKeydown="savePos(this)"
                              onKeyup="savePos(this)"
                              onmousedown="savePos(this)"
                              onmouseup="savePos(this)"
                              onfocus="savePos(this)"
                              rows="14" cols="50"></textarea>
        </td>
    </tr>
    <tr>
        <td><input type="text" id="inputtext" /></td>
        <td><input type="button" onClick="add()" value="Add Text"/></td>
    </tr>
</table>
</form>
此代码的原文是：http://blog.csdn.net/liujin4049/archive/2006/09/19/1244065.aspx，在此谢过！

这段js代码同时支持IE和Firefox，甚是精彩，可见此人js功力深厚啊，呵呵。

Btw：听说Firefox现在的市场占有率已经达到17%了，而IE8也快出来了，浏览器之间又会掀起一场你死我活的争斗，而这种争斗可以使浏览器的解析标准会越来越规范，我们写代码也会越来越省事，这实在是一件值得高兴的事。

赞 (0)

相关推荐

  • 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

    用javascript获取鼠标位置: 复制代码 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - docu

  • js光标定位文本框回车表单提交问题的解决方法

    本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • js实现在文本框光标处添加字符的方法介绍

    复制代码 代码如下: <script language="javascript" type="text/javascript"> function Button4_onclick(obj) { obj.focus(); var rng=document.selection.createRange(); rng.setEndPoint("StartToStart",obj.createTextRange()); var eng=docu

  • js获取光标位置和设置文本框光标位置示例代码

    复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

  • js/html光标定位的实现代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author&q

  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

  • javascript获得光标所在的文本框(text/textarea)中的位置

    js获得光标所在的文本框(text/textarea)中的位置 function getPosition(obj){ var result = 0; if(obj.selectionStart){ //IE以外 result = obj.selectionStart }else{ //IE var rng; if(obj.tagName == "textarea"){ //TEXTAREA rng = event.srcElement.createTextRange(); rng.mo

  • javascript设置文本框光标的方法实例小结

    本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

  • 用javascript获取textarea中的光标位置

    对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法.昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧. var start=0;     var end=0;     function add(){                var textBox = document.getElementById("ta"

  • 如何利用JavaScript获取字符串中重复次数最多的字符

    目录 题目 分析 使用对象 解题思路: 代码实现如下: 分析: 数组&指针 解题思路: 代码实现如下: 分析: 总结 想要保持自己的技术活力,最有效的手段就是通过不断地输入来提供足够的养分.我们也不必刻意追求高深的或者新鲜的知识点,通过对一个基础问题的全方位多维度解析,同样也会收获不小. 题目 假设有这么一道题目:请获取字符串 "bianchengsanmei,xuexiyouqudezhishi,jieshiyouqudepengyou,suzaoyouqudelinghun.&quo

  • Javascript获取页面元素的绝对位置实现

    目录 一.概念 二.获取方法 三.代码 四.问题 一.概念 绝对位置:网页元素的左上角相对于整张网页左上角的坐标 相对位置:相对于浏览器窗口左上角的坐标 二.获取方法 1.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离. 2.每个元素都有offsetParent属性.offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定

  • JavaScript获取网页中第一个图片id的方法

    本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

  • 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = request("type") function request() { var query = location.search; var paras = arguments[0]; if (arguments.length == 2) { query = arguments[1]; }

  • JavaScript获取ul中li个数的方法

    本文实例讲述了JavaScript获取ul中li个数的方法.分享给大家供大家参考,具体如下: 有这样一段HTML代码: <ul id="mycarousel"> <li><img src=01_MED.jpg height=80 width=100/></li> <li><img src=02_MED.jpg height=80 width=100/></li> <li><img sr

  • 使用JavaScript获取Request中参数的值方法

    假设现在有一个URL,如下. http://www.jb51.net 如何通过JS访问到id和name里面的值呢,实现我们来分析一下思路. 先获取当前页面的URL,通过window.location.href. 提取该URL?后面的部分,通过slice()方法. 把获取到的Request对象分割成字符串数组,通过split() 方法. 接下来看代码. function getUrlVars() { var vars = [], hash; var hashes = window.location

  • JavaScript获取页面中第一个锚定文本的方法

    本文实例讲述了JavaScript获取页面中第一个锚定文本的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.archors数组获取第一个archor的innerHTML <!DOCTYPE html> <html> <body> <a name="html">jb51.net</a><br> <a name="css">CSS Tutorial</a

  • JavaScript获取页面中超链接数量的方法

    JavaScript获取页面中超链接数量的方法

    本文实例讲述了JavaScript获取页面中超链接数量的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript取得页面的超链接数,感兴趣的朋友可以学习借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-total-link-num-codes/ 具体代码如下: <html> <head> <title>JavaScript取得页面的超链接数</title> <script l

随机推荐