用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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
node.js入门教程
Jun 01 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
js实现AI五子棋人机大战
May 28 Javascript
vue中activated的用法
Jan 03 Vue.js
用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 xml-rpc远程调用
2008/12/19 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
javascript add event remove event
2008/04/07 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
python处理csv数据的方法
2015/03/11 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
python 模拟登陆163邮箱
2020/12/15 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
庆祝儿童节标语
2014/10/09 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python