获取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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
javascript vvorld 在线加密破解方法
Nov 13 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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基础知识:类与对象(1)
2006/12/13 PHP
深入php list()函数的详解
2013/06/05 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
简单理解Python中的装饰器
2015/07/31 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
python导入模块交叉引用的方法
2019/01/19 Python
python同步两个文件夹下的内容
2019/08/29 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python实现打砖块游戏
2020/02/25 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
管理科学大学生求职信
2013/11/13 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
关于运动会的口号
2014/06/07 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript