js获取div编辑框,textarea,input text的光标位置,兼容FF和IE

<h<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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; 
}
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 
}
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; 
}
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; 
} 
}
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; 
} 
} 
} 
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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

CSS+JS实现图片集展示(续)

上一篇文章里,我们实现了图片集的展示,在本文,对上一篇文章的内容作了封装,实现效果上作了一些优化,具体的思路我就不再赘述,下面将我的代码贴出来,以供搭建参考。

1312
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(一):数据的导入、数据结构

SAS的数据类型 ? 首先,sas的编程大概就两块:Data和PROC,这个倒是蛮清晰的划分。然后目前关注data部分。 SAS的数据类型还真的只有两种:数字和...

38212
来自专栏互联网杂技

Angularjs中UI Router超级详细的教程{{下}}

接着上一 state间如何传字符串参数 在路由中这样设置: .state('content.photos.detail.comment',{ url:'/co...

4545
来自专栏Golang语言社区

Go中的依赖注入

I have written a small utility package to handle dependency injection in Go (it'...

2324
来自专栏Y大宽

TCGA数据下载分析(1-1):RTCGA包gene获取表达值并可视化

可以用前述的checkTCGA查看类型,然后针对性下载,用法如下: downloadTCGA(cancerTypes, dataSet = "Merge_Cl...

4702
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件V2.0.0.1——分页控件的源码(一) 主体

namespace JYK.Controls {     /**//// <summary>     /// 分页控件     /// PageGetData....

1807
来自专栏lzj_learn_note

自定义无限循环ViewPager(三)――ViewPager方法改造实现无限循环

在前面两篇文章中,已经对ViewPager的实现原理有了分析,相信大家对于ViewPager的页面切换也有了一定的了解,接下来就是在ViewPager的基础上对...

2423
来自专栏ios 技术积累

ios 一款集成方便的二维码扫描

做项目要用到二维码扫描,在git上搜索到了LBXScan开源库很不错,详细的可以下载demo,我只是使用了部分功能因此pod中只导入了

2162
来自专栏有趣的django

21天打造分布式爬虫-Crawl爬取小程序社区(八)

1163
来自专栏函数式编程语言及工具

Akka(35): Http:Server side streaming

   在前面几篇讨论里我们都提到过:Akka-http是一项系统集成工具库。它是以数据交换的形式进行系统集成的。所以,Akka-http的核心功能应该是数据交换...

2215

扫码关注云+社区