用javascript获取textarea中的光标位置


Posted in Javascript onMay 06, 2008

对于写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也快出来了,浏览器之间又会掀起一场你死我活的争斗,而这种争斗可以使浏览器的解析标准会越来越规范,我们写代码也会越来越省事,这实在是一件值得高兴的事。

Javascript 相关文章推荐
JS操作Cookies的小例子
Oct 15 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序合法域名配置方法
May 06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 #Javascript
来自chinaz的ajax获取评论代码
May 03 #Javascript
定义select的边框颜色
Apr 28 #Javascript
JavaScript对象模型-执行模型
Apr 28 #Javascript
JavaScript面象对象设计
Apr 28 #Javascript
JS event使用方法详解
Apr 28 #Javascript
ext for eclipse插件安装方法
Apr 27 #Javascript
You might like
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
详解javascript appendChild()的完整功能
2018/08/18 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python实现中文文本分句的例子
2019/07/15 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
后勤人员自我评价怎么写
2013/09/19 职场文书
大学自荐信
2013/12/12 职场文书
正科级干部考察材料
2014/05/29 职场文书
通信工程专业求职信
2014/06/04 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
财务管理专业自荐书
2014/09/02 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python