获取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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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采集速度探究总结(原创)
2008/04/18 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
鼠标图片振动代码
2006/07/06 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python匿名函数用法实例分析
2019/08/03 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
某公司.Net方向面试题
2014/04/24 面试题
我心目中的好老师活动方案
2014/08/19 职场文书
房屋出租委托书格式
2014/09/23 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
学校财务管理制度
2015/08/04 职场文书
预备党员入党感想
2015/08/10 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书