>웹 프론트엔드 >JS 튜토리얼 >div 편집 상자, 텍스트 영역, 입력 텍스트의 커서 위치를 가져옵니다. IE, FF 및 Chrome_javascript 기술과 호환되는 방법을 소개합니다.

div 편집 상자, 텍스트 영역, 입력 텍스트의 커서 위치를 가져옵니다. IE, FF 및 Chrome_javascript 기술과 호환되는 방법을 소개합니다.

WBOY
WBOY원래의
2016-05-16 17:48:271116검색

2시간 동안 온라인으로 검색해 보니 FF와 호환되는 게 하나도 없네요. 이런 건 온라인에서 쉽게 구할 수 없는 것 같아서 제가 직접 만들어 봐야 겠네요. 사람들이 미래에 사용할 수 있도록.

문제를 줄이기 위해 jquery를 몇몇 곳에서 사용하고 있는데, 네이티브 JS를 수정하는 것도 매우 편리합니다. 필요한 경우 직접 수정해 보세요.
누구나 전문가의 곁을 지나 결정을 내리실 수 있으며, 개선된 코드를 제공하겠다는 메시지를 남겨주셔도 좋습니다.
개선되어 Chrome과 호환됩니다. 다음 코드는 최신 버전으로 수정되었습니다
소스코드가 있습니다

코드 복사 코드는 다음과 같습니다.




js는 div 편집 상자, 텍스트 영역, 입력을 가져옵니다. FF 및 IE와 호환되는 텍스트의 커서 위치
;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 = ""; txtoo = window.getSelection().anchorNode.previousSibling;
while (txtoo != null) {
txt = txtoo.textContent;
txtoo = txtoo.previousSibling; //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.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
}
}
} //From http://www.cnblogs.com/ahjesus 작성자의 노고를 존중하며, 전재 시 출처를 밝혀주시면 감사하겠습니다!
else {
return 0;
}
}
결과 반환
}

function getValue(element) {
var pos = getPosition(element );
document.getElementById("pnum").value = pos;