用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 onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
使用URL传输SESSION信息
2015/07/14 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
用 JSON 处理缓存
2007/04/27 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue-router传参用法详解
2019/01/19 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
酒店经理职责
2014/01/30 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
委托证明范本
2014/11/25 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
个人年终总结开头
2015/03/06 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python