獲取div編輯框，textarea，input text的光標(biāo)位置 兼容IE，F(xiàn)F和Chrome的方法介紹
更新時(shí)間：2012年11月08日 16:15:57 作者：
獲取div編輯框，textarea，input text的光標(biāo)位置 兼容IE，F(xiàn)F和Chrome的方法介紹，有需求的朋友可以參考
網(wǎng)上苦找2小時(shí)，全是不能兼容FF的，看來(lái)這種東西網(wǎng)上是搞不到現(xiàn)成的了，只能自己動(dòng)手豐衣足食
現(xiàn)在發(fā)布出來(lái)，今后網(wǎng)上就有現(xiàn)成的供人使用了。
為了省事，少量位置用了jquery 改原生JS也很方便，誰(shuí)需要就請(qǐng)自己修改了。
歡迎各位路過(guò)高人拍板，歡迎各位留言提供改進(jìn)代碼。
又改進(jìn) 兼容了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的光標(biāo)位置，兼容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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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! 你好,歡迎測(cè)試!" onmouseup="getValue(this)"
style="display: block" />
<textarea cols="60" rows="10" onkeyup="getValue(this)" onmouseup="getValue(this)">Hello,wellcome to test! 你好,歡迎測(cè)試! 注意源代碼開(kāi)閉合標(biāo)記之間不能換行，否則統(tǒng)計(jì)錯(cuò)誤！</textarea>
<div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true">一二三<span>四五</span>六七八<span>九零</span> 注意源代碼開(kāi)閉合標(biāo)記之間不能換行，否則統(tǒng)計(jì)錯(cuò)誤！注意div編輯框源碼里面是嵌套有其他標(biāo)簽的，可以正常返回正確位置！</div>
<br />
<div id="Div2" onclick="getValue(this);" onkeyup="getValue(this);">一二三四五六<span>七八</span></div>
</body>
</html>
現(xiàn)在發(fā)布出來(lái)，今后網(wǎng)上就有現(xiàn)成的供人使用了。
為了省事，少量位置用了jquery 改原生JS也很方便，誰(shuí)需要就請(qǐng)自己修改了。
歡迎各位路過(guò)高人拍板，歡迎各位留言提供改進(jìn)代碼。
又改進(jìn) 兼容了Chrome 下面的代碼已修改成最新版
上源碼了
復(fù)制代碼 代碼如下:
<!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的光標(biāo)位置，兼容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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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 尊重作者辛苦勞動(dòng)成果，轉(zhuǎn)載請(qǐng)注明出處，謝謝！
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! 你好,歡迎測(cè)試!" onmouseup="getValue(this)"
style="display: block" />
<textarea cols="60" rows="10" onkeyup="getValue(this)" onmouseup="getValue(this)">Hello,wellcome to test! 你好,歡迎測(cè)試! 注意源代碼開(kāi)閉合標(biāo)記之間不能換行，否則統(tǒng)計(jì)錯(cuò)誤！</textarea>
<div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true">一二三<span>四五</span>六七八<span>九零</span> 注意源代碼開(kāi)閉合標(biāo)記之間不能換行，否則統(tǒng)計(jì)錯(cuò)誤！注意div編輯框源碼里面是嵌套有其他標(biāo)簽的，可以正常返回正確位置！</div>
<br />
<div id="Div2" onclick="getValue(this);" onkeyup="getValue(this);">一二三四五六<span>七八</span></div>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了基于ajax實(shí)現(xiàn)上傳圖片代碼示例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
本文為大家介紹下如何使用js循環(huán)json數(shù)據(jù)的列，簡(jiǎn)單幾步輕松實(shí)現(xiàn)2013-09-09
為數(shù)據(jù)添加append,remove功能...2006-10-10
JavaScript設(shè)計(jì)模式之性能優(yōu)化模式享元模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之性能優(yōu)化模式享元模式，享元設(shè)計(jì)模式是用于性能優(yōu)化的模式，這種設(shè)計(jì)模式的核心在于可以共享技術(shù)并支持對(duì)大量細(xì)分過(guò)后的對(duì)象進(jìn)行調(diào)整，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-06-06
微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖,本文的主要內(nèi)容是在導(dǎo)航條的下方做一張輪播圖，自動(dòng)播放最新的重要?jiǎng)討B(tài)，感興趣的小伙伴們可以參考一下2016-04-04
Javascript獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值示例
獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值可以利用split函數(shù)來(lái)按參數(shù)切成數(shù)組、利用正則表達(dá)式來(lái)獲取，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)左滑刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦。小編覺(jué)得挺不錯(cuò)的?，F(xiàn)在分享給大家，讓大家參考一下2016-03-03
JS 實(shí)現(xiàn)列表與多選框選擇附預(yù)覽動(dòng)畫(huà)
本節(jié)為大家介紹的是用JS實(shí)現(xiàn)列表與多選框選擇，并附gif演示動(dòng)畫(huà)，這個(gè)例子很詳細(xì)，大家可以看看2014-10-10