获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍


Posted in Javascript onNovember 08, 2012

网上苦找2小时,全是不能兼容FF的,看来这种东西网上是搞不到现成的了,只能自己动手丰衣足食
现在发布出来,今后网上就有现成的供人使用了。

为了省事,少量位置用了jquery 改原生JS也很方便,谁需要就请自己修改了。
欢迎各位路过高人拍板,欢迎各位留言提供改进代码。
又改进 兼容了Chrome 下面的代码已修改成最新版
上源码了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>js获取div编辑框,textarea,input text的光标位置,兼容FF和IE</title> 
<script src="jquery-1.4.4.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//去除左右所有空格 
String.prototype.trim = function () { 
return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
function getPosition(element) { 
var OsObject = ""; 
if (navigator.userAgent.indexOf("MSIE") > 0) { 
OsObject = "MSIE"; 
} 
if (navigator.userAgent.indexOf("Firefox") > 0) { 
OsObject = "Firefox"; 
} 
if (navigator.userAgent.indexOf("Safari") > 0) { 
OsObject = "Safari"; 
} 
if (navigator.userAgent.indexOf("Camino") > 0) { 
OsObject = "Camino"; 
} 
if (navigator.userAgent.indexOf("Gecko") > 0) { 
OsObject = "Gecko"; 
} 
if (navigator.userAgent.indexOf("Chrome") > 0) { 
OsObject = "Chrome"; 
} var result = 0; 
if (!document.selection) { //非IE浏览器 
var thisTagName = null; 
if ($(element).attr("tagName") != "TEXTAREA" && $(element).attr("tagName") != "INPUT") { 
if ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true") { 
thisTagName = window.getSelection().anchorNode.parentElement.tagName; 
} //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢! 
else { 
thisTagName == null; 
} 
} 
else { 
if ($(element).attr("tagName") == "INPUT" && $(element).attr("type") == "text") { 
thisTagName = window.getSelection().anchorNode.tagName; 
} 
else { 
console.log(window.getSelection()); 
thisTagName = window.getSelection().anchorNode.tagName; 
} 
} 
console.log(thisTagName); 
if (thisTagName == "TEXTAREA" || thisTagName == "INPUT" || (thisTagName=="BODY"&&OsObject == "Chrome")) { 
result = element.selectionStart 
} //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢! 
else if (thisTagName != null) { 
if (thisTagName == element.tagName) { 
if (window.getSelection().anchorNode.textContent == $(element).text()) { 
result = window.getSelection().anchorOffset; 
} 
else { 
var currentIndex = window.getSelection().anchorOffset; 
var txt = ""; 
var txtoo = window.getSelection().anchorNode.previousSibling; 
while (txtoo != null) { 
txt += txtoo.textContent; 
txtoo = txtoo.previousSibling; 
} //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢! 
result = txt.trim().length + currentIndex; 
} 
} 
else { 
var currentIndex = window.getSelection().anchorOffset; 
var txt = ""; 
var txtoo = window.getSelection().anchorNode.parentElement.previousSibling; 
while (txtoo != null) { 
txt += txtoo.textContent; 
txtoo = txtoo.previousSibling; 
} 
result = txt.trim().length + currentIndex; 
} 
} //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢! 
else { 
return 0; 
} 
} else { //IE 
var rng; 
if ($(element).attr("tagName") == "TEXTAREA" || ($(element).attr("tagName") == "INPUT" && $(element).attr("type") == "text") || ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true")) { 
element.focus(); 
rng = document.selection.createRange(); 
rng.moveStart('character', -element.innerText.length); 
var text = rng.text; 
for (var i = 0; i < element.innerText.length; i++) { 
if (element.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) { 
result = i + 1; 
} 
} 
} //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢! 
else { 
return 0; 
} 
} 
return result; 
} 
function getValue(element) { 
var pos = getPosition(element); 
document.getElementById("pnum").value = pos; 
} 
</script> 
<style type="text/css"> 
#Div1, #Div2 
{ 
width: 500px; 
height: 100px; 
border: solid 1px black; 
} 
</style> 
</head> 
<body> 
<input id="pnum" type="text" value="Hello,wellcome to test! 你好,欢迎测试!" onmouseup="getValue(this)" 
style="display: block" /> 
<textarea cols="60" rows="10" onkeyup="getValue(this)" onmouseup="getValue(this)">Hello,wellcome to test! 你好,欢迎测试! 注意源代码开闭合标记之间不能换行,否则统计错误!</textarea> 
<div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true">一二三<span>四五</span>六七八<span>九零</span> 注意源代码开闭合标记之间不能换行,否则统计错误!注意div编辑框源码里面是嵌套有其他标签的,可以正常返回正确位置!</div> 
<br /> 
<div id="Div2" onclick="getValue(this);" onkeyup="getValue(this);">一二三四五六<span>七八</span></div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
javascript模拟select,jselect的方法实现
Nov 08 #Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 #Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 #Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 #Javascript
Javascript继承(上)——对象构建介绍
Nov 08 #Javascript
异步javascript的原理和实现技巧介绍
Nov 08 #Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 #Javascript
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
javascript innerHTML使用分析
2010/12/03 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
Python continue语句用法实例
2014/03/11 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python处理大日志文件
2019/07/23 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
母校寄语大全
2014/04/10 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
介绍信怎么写
2015/05/05 职场文书
2016新年问候语大全
2015/11/11 职场文书
2016年离婚协议书范文
2016/03/18 职场文书