用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 相关文章推荐
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
浅谈js中的闭包
Mar 16 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
js自制图片放大镜功能
Jan 24 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vuex进阶知识点巩固
May 20 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python 数据结构之旋转链表
2017/02/25 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python 项目目录结构设置
2020/02/14 Python
django项目中新增app的2种实现方法
2020/04/01 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
追悼会上的答谢词
2014/01/10 职场文书
企业车辆管理制度
2014/01/24 职场文书
家长对老师的感言
2014/03/11 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python