संतोषप्रद कर्सर पोजिशनिंग पर आपको मिलने वाले अधिकांश उत्तर इस बात में काफी सरल हैं कि वे केवल सादे वेनिला पाठ के साथ इनपुट के लिए पूर्ति करते हैं। एक बार जब आप html तत्वों का उपयोग कंटेनर में करते हैं, तो दर्ज किया गया पाठ नोड्स में विभाजित हो जाता है और एक पेड़ की संरचना में उदारतापूर्वक वितरित होता है।
कर्सर स्थिति सेट करने के लिए मेरे पास यह फ़ंक्शन है जो आपूर्ति किए गए नोड के भीतर सभी चाइल्ड टेक्स्ट नोड्स को गोल करता है और प्रारंभिक नोड की शुरुआत से वर्णक्रम चरित्र में एक सीमा निर्धारित करता है :
function createRange(node, chars, range) {
if (!range) {
range = document.createRange()
range.selectNode(node);
range.setStart(node, 0);
}
if (chars.count === 0) {
range.setEnd(node, chars.count);
} else if (node && chars.count >0) {
if (node.nodeType === Node.TEXT_NODE) {
if (node.textContent.length < chars.count) {
chars.count -= node.textContent.length;
} else {
range.setEnd(node, chars.count);
chars.count = 0;
}
} else {
for (var lp = 0; lp < node.childNodes.length; lp++) {
range = createRange(node.childNodes[lp], chars, range);
if (chars.count === 0) {
break;
}
}
}
}
return range;
};
मैं तो इस समारोह के साथ दिनचर्या कहते हैं:
function setCurrentCursorPosition(chars) {
if (chars >= 0) {
var selection = window.getSelection();
range = createRange(document.getElementById("test").parentNode, { count: chars });
if (range) {
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}
};
Range.collapse (false) कर्सर को रेंज के अंत में सेट करता है। मैंने इसे क्रोम, IE, मोज़िला और ओपेरा के नवीनतम संस्करणों के साथ परीक्षण किया है और वे सभी ठीक काम करते हैं।
पुनश्च। अगर किसी को दिलचस्पी है तो मुझे इस कोड का उपयोग करके वर्तमान कर्सर स्थिति प्राप्त होगी:
function isChildOf(node, parentId) {
while (node !== null) {
if (node.id === parentId) {
return true;
}
node = node.parentNode;
}
return false;
};
function getCurrentCursorPosition(parentId) {
var selection = window.getSelection(),
charCount = -1,
node;
if (selection.focusNode) {
if (isChildOf(selection.focusNode, parentId)) {
node = selection.focusNode;
charCount = selection.focusOffset;
while (node) {
if (node.id === parentId) {
break;
}
if (node.previousSibling) {
node = node.previousSibling;
charCount += node.textContent.length;
} else {
node = node.parentNode;
if (node === null) {
break
}
}
}
}
}
return charCount;
};
कोड सेट फ़ंक्शन के विपरीत करता है - इसे वर्तमान window.getSelection () मिलता है। फ़ोकस नोड और फ़ोकसऑफ़सेट और पीछे की ओर गिने सभी पाठ वर्णों का सामना करता है जब तक कि यह कंटेनर आईडी की आईडी के साथ एक मूल नोड को हिट नहीं करता है। .ChildOf फ़ंक्शन रनिंग करने से पहले जांचता है कि वास्तव में आपूर्ति नोड वास्तव में आपूर्ति किए गए parentId का बच्चा है ।
कोड को बिना किसी बदलाव के सीधे काम करना चाहिए, लेकिन मैंने अभी इसे एक jQuery प्लगइन से लिया है जिसे मैंने विकसित किया है, इसलिए इस जोड़े को हैक किया है - मुझे बताएं कि क्या कुछ भी काम नहीं करता है!