div編集ボックス、textarea、input textのカーソル位置互換IE、FF、Chromeを取得する方法の紹介
5953 ワード
ネット上で苦労して2時間探して、すべてFFに対応することができなくて、見たところこのようなものはネット上で既成のものができないので、自分で豊衣足食をするしかありません
現在発表されており、今後はネット上で既存の使用者が利用できるようになった.
手間を省くために、少量の位置でjqueryを使って原生JSを直すのも便利ですので、誰か必要なら自分で直してください.
皆さんが通りかかった高人の拍子板を歓迎して、皆さんの伝言が改善コードを提供することを歓迎します.
また、Chromeとの互換性が向上しました.次のコードは最新版に変更されました.
ソースコードを入力しました
現在発表されており、今後はネット上で既存の使用者が利用できるようになった.
手間を省くために、少量の位置でjqueryを使って原生JSを直すのも便利ですので、誰か必要なら自分で直してください.
皆さんが通りかかった高人の拍子板を歓迎して、皆さんの伝言が改善コードを提供することを歓迎します.
また、Chromeとの互換性が向上しました.次のコードは最新版に変更されました.
ソースコードを入力しました
js div ,textarea,input text , FF IE
<br>//
<br>String.prototype.trim = function () {
<br>return this.replace(/(^\s*)|(\s*$)/g, "");
<br>}
<br>function getPosition(element) {
<br>var OsObject = "";
<br>if (navigator.userAgent.indexOf("MSIE") > 0) {
<br>OsObject = "MSIE";
<br>}
<br>if (navigator.userAgent.indexOf("Firefox") > 0) {
<br>OsObject = "Firefox";
<br>}
<br>if (navigator.userAgent.indexOf("Safari") > 0) {
<br>OsObject = "Safari";
<br>}
<br>if (navigator.userAgent.indexOf("Camino") > 0) {
<br>OsObject = "Camino";
<br>}
<br>if (navigator.userAgent.indexOf("Gecko") > 0) {
<br>OsObject = "Gecko";
<br>}
<br>if (navigator.userAgent.indexOf("Chrome") > 0) {
<br>OsObject = "Chrome";
<br>}
<br>
<br>var result = 0;
<br>if (!document.selection) { // IE
<br>var thisTagName = null;
<br>if ($(element).attr("tagName") != "TEXTAREA" && $(element).attr("tagName") != "INPUT") {
<br>if ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true") {
<br>thisTagName = window.getSelection().anchorNode.parentElement.tagName;
<br>} // http://www.cnblogs.com/ahjesus , , !
<br>else {
<br>thisTagName == null;
<br>}
<br>}
<br>else {
<br>if ($(element).attr("tagName") == "INPUT" && $(element).attr("type") == "text") {
<br>thisTagName = window.getSelection().anchorNode.tagName;
<br>}
<br>else {
<br>console.log(window.getSelection());
<br>thisTagName = window.getSelection().anchorNode.tagName;
<br>}
<br>}
<br>console.log(thisTagName);
<br>if (thisTagName == "TEXTAREA" || thisTagName == "INPUT" || (thisTagName=="BODY"&&OsObject == "Chrome")) {
<br>result = element.selectionStart
<br>} // http://www.cnblogs.com/ahjesus , , !
<br>else if (thisTagName != null) {
<br>if (thisTagName == element.tagName) {
<br>if (window.getSelection().anchorNode.textContent == $(element).text()) {
<br>result = window.getSelection().anchorOffset;
<br>}
<br>else {
<br>var currentIndex = window.getSelection().anchorOffset;
<br>var txt = "";
<br>var txtoo = window.getSelection().anchorNode.previousSibling;
<br>while (txtoo != null) {
<br>txt += txtoo.textContent;
<br>txtoo = txtoo.previousSibling;
<br>} // http://www.cnblogs.com/ahjesus , , !
<br>result = txt.trim().length + currentIndex;
<br>}
<br>}
<br>else {
<br>var currentIndex = window.getSelection().anchorOffset;
<br>var txt = "";
<br>var txtoo = window.getSelection().anchorNode.parentElement.previousSibling;
<br>while (txtoo != null) {
<br>txt += txtoo.textContent;
<br>txtoo = txtoo.previousSibling;
<br>}
<br>result = txt.trim().length + currentIndex;
<br>}
<br>} // http://www.cnblogs.com/ahjesus , , !
<br>else {
<br>return 0;
<br>}
<br>} else { //IE
<br>var rng;
<br>if ($(element).attr("tagName") == "TEXTAREA" || ($(element).attr("tagName") == "INPUT" && $(element).attr("type") == "text") || ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true")) {
<br>element.focus();
<br>rng = document.selection.createRange();
<br>rng.moveStart('character', -element.innerText.length);
<br>var text = rng.text;
<br>for (var i = 0; i < element.innerText.length; i++) {
<br>if (element.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) {
<br>result = i + 1;
<br>}
<br>}
<br>} // http://www.cnblogs.com/ahjesus , , !
<br>else {
<br>return 0;
<br>}
<br>}
<br>return result;
<br>}
<br>
<br>function getValue(element) {
<br>var pos = getPosition(element);
<br>document.getElementById("pnum").value = pos;
<br>}
<br>
<br>
style="display: block" />
, ! div , !