javascript获取textarea中光标的位置 兼容
2 var end=0;
3 function add(){
4 var textBox = document.getElementById("ta");
5 var pre = textBox.value.substr(0, start);
6 var post = textBox.value.substr(end);
7 textBox.value = pre + document.getElementById("inputtext").value + post;
8 }
9 function savePos(textBox){
10 //如果是Firefox(1.5)的话,方法很简单
11 if(typeof(textBox.selectionStart) == "number"){
12 start = textBox.selectionStart;
13 end = textBox.selectionEnd;
14 }
15 //下面是IE(6.0)的方法,麻烦得很,还要计算上'\n'
16 else if(document.selection){
17 var range = document.selection.createRange();
18 if(range.parentElement().id == textBox.id){
19 // create a selection of the whole textarea
20 var range_all = document.body.createTextRange();
21 range_all.moveToElementText(textBox);
22 //两个range,一个是已经选择的text(range),一个是整个textarea(range_all)
23 //range_all.compareEndPoints()比较两个端点,如果range_all比range更往左(further to the left),则 //返回小于0的值,则range_all往右移一点,直到两个range的start相同。
24 // calculate selection start point by moving beginning of range_all to beginning of range
25 for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
26 range_all.moveStart('character', 1);
27 // get number of line breaks from textarea start to selection start and add them to start
28 // 计算一下\n
29 for (var i = 0; i <= start; i ++){
30 if (textBox.value.charAt(i) == '\n')
31 start++;
32 }
33 // create a selection of the whole textarea
34 var range_all = document.body.createTextRange();
35 range_all.moveToElementText(textBox);
36 // calculate selection end point by moving beginning of range_all to end of range
37 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
38 range_all.moveStart('character', 1);
39 // get number of line breaks from textarea start to selection end and add them to end
40 for (var i = 0; i <= end; i ++){
41 if (textBox.value.charAt(i) == '\n')
42 end ++;
43 }
44 }
45 }
46 document.getElementById("start").value = start;
47 document.getElementById("end").value = end;
48 }
49
50
2 <table border="1" cellspacing="0" cellpadding="0">
3 <tr>
4 <td>start: <input type="text" id="start" size="3"/></td>
5 <td>end: <input type="text" id="end" size="3"/></td>
6 </tr>
7 <tr>
8 <td colspan="2">
9 <textarea id="ta" onKeydown="savePos(this)"
10 onKeyup="savePos(this)"
11 onmousedown="savePos(this)"
12 onmouseup="savePos(this)"
13 onfocus="savePos(this)"
14 rows="14" cols="50"></textarea>
15 </td>
16 </tr>
17 <tr>
18 <td><input type="text" id="inputtext" /></td>
19 <td><input type="button" onClick="add()" value="Add Text"/></td>
20 </tr>
21 </table>
22 </form>
23
24
转载于:https://www.cnblogs.com/mslove/archive/2010/03/30/1700640.html
javascript获取textarea中光标的位置 兼容相关推荐
- 使用TextRange获取输入框中光标的位置
TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? Te ...
- JavaScript获取元素的坐标位置的函数
获取原理是先获取相对父元素的坐标 var tag=document.getElementById('id')//该left是获取在相对父元素下的相对x轴坐标 //tag.offsetLeft会计算该标 ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- javascript获取窗口和div位置
1 事件获取 事件的位置主要涉及clientX,clientY,screenX,screenY,offsetX,offsetY . 1.1offsetX,offsetY 鼠标相对于事件源元素(srcE ...
- android 系统光标,如何定位android系统中光标的位置
满意答案 Android中有很多可编辑的弹出框,其中有些是让我们来修改其中的字符,这时光标位置定位在哪里呢? 刚刚解了一个bug是关于这个光标的位置的,似乎Android原生中这种情况是把光标定位到字 ...
- java poi word bookmarks,java和javascript获取word的 书签位置
方法1.把IE浏览器的activex都打开,使用如下网页,可以看到书签顺序和位置: var word; word = new ActiveXObject("Word.Application& ...
- Javascript—获取元素ele的位置(x,y)
function getPosition(e){ var x,y=0; while(e!=null){ x += e.offsetLeft; y +=e.offsetTop; e=e.offsetPa ...
- 获取html中光标位置
本篇整理在项目中遇到的一个小问题,在js中监听了"parse"粘贴事件,导致粘贴文字到输入框出现问题. 通过获取输入框光标位置,然后拼接字符串解决. 第一种方法 获取textare ...
- 详细解析 JavaScript 获取元素的坐标
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) from:https://www.cnblogs.com/dong-xu/p/7150715.html?utm ...
最新文章
- java 进度条 不更新_java 进度条不能刷新解决方案 (已更新一次)
- Javascript:郁闷了好久终于找到原因了,原理还不明白
- DataSet RecordSet 互转
- docker构建镜像 发布镜像
- Jquery对象本质和隐式迭代
- .NET Core 2.0 的dll实时更新、https、依赖包变更问题及解决
- 关于区块链技术的10本书
- 线程与并发基础-青铜
- mysql5.7 mysql库下面的user表没有password字段无法修改密码
- beego——URL构建
- 数据结构 关键路径的个人理解
- 基于JSP的学生管理系统
- 矩阵乘法 c/c++代码
- TVS参数详解及选型应用
- python非参数检验
- 罗永浩是个挺能折腾的人
- php word 生成图片,PHP导出word文档的简单实现方法(可导出图片)-Go语言中文社区
- 「魔兽世界怀旧服」衣米魔兽怀旧服玩家年度实物礼品发放
- wim工具扫描linux磁盘,WimTool Pro(WIM映像处理工具)
- ECCV 2020预会议 直播笔记| Suppress and Balance: A Simple Gated Network for Salient Object Detection
热门文章
- android如何添加gif,Android加载Gif和ImageView的通用解决方案:android-gif-drawable(1)...
- python编程高手教程_写给编程高手的Python教程(11) 深入类和对象
- 002_FastDFS单机部署
- 012_html如何查看源代码
- c语言 switch语句大小,C语言switch语句(板式整齐)
- mysql的字符集设置为什么_为什么Mysql默认的字符集都是latin1
- mysql存储的判断if_if在数据库mysql存储中判断
- internetreadfile读取数据长度为0_Datax3.0的安装和基本使用
- r语言electricity数据集_R语言学习-数据集
- 理解进程创建、可执行文件的加载和进程执行进程切换,重点理解分析fork、execve和进程切换