获取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 new后的constructor属性
Aug 05 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
vue组件与复用详解
Apr 08 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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教程 预定义变量
2009/10/23 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
python 文件与目录操作
2008/12/24 Python
python实现爬虫下载漫画示例
2014/02/16 Python
python如何查看系统网络流量的信息
2016/09/12 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python调用webservice接口的实现
2019/07/12 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
指针和引用有什么区别
2013/01/13 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
初中数学教学反思
2014/01/16 职场文书
本科毕业生自荐信
2014/05/26 职场文书
预备党员自我评价范文
2015/03/04 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL