用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简单体验
Jan 10 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
JavaScript 数组详解
Oct 10 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
javaScript基础语法介绍
Feb 28 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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中if和or运行效率对比
2014/12/12 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
简介Django中内置的一些中间件
2015/07/24 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python监控进程脚本
2018/04/12 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
南京导游词
2015/02/03 职场文书
内勤岗位职责范本
2015/04/13 职场文书
员工福利申请报告
2015/05/15 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server