प्रथम में कर्सर की स्थिति बनाए रखने के लिए, इस इन के समान है:contenteditable div सब से
Editing Iframe Content in IE - problem in maintaining text selection
How to get caret position within contenteditable div with html child elements?
असल में, मैं चहचहाना में नए ट्वीट संपादक को कुछ इसी तरह लिख रहा हूँ। के अंदर contentEditable सेट के साथ, मैं टेक्स्ट को पार्स कर रहा हूं। जब मैं का पता लगाने के लिए क्या मुझे लगता है कि एक यूआरएल है, मुझे लगता है कि पाठ को निकाल देते हैं और div के अंदर एक <a> टैग में प्रवेश (go to www.google.com का उदाहरण दिया गया संदेश Go to <a href='..'>www.google.com</a> हो जाता है। लेकिन, कैरट स्थिति खो दिया है जब मैं ऐसा।
का उपयोग करना उन अन्य एसओ पदों में @ टिम-डाउन द्वारा सुझाव केवल तब तक काम करेंगे जब तक आप डोम को संपादित नहीं करते हैं (जैसा कि वह कहता है)। मैं डीओएम संपादित कर रहा हूं, इसलिए कैरेट की स्थिति गुम हो गई है।
क्या यह है वर्तमान कोड पर काम करके इसे प्राप्त करने के लिए संभवतः संभवतः रंगी लाइब्रेरी संदर्भित किया गया है।
इस समय मेरे पास जो कोड है (अन्य एसओ पदों से):
var saveSelection, restoreSelection;
if (window.getSelection) {
// IE 9 and non-IE
saveSelection = function(win) {
var sel = win.getSelection(), ranges = [];
if (sel.rangeCount) {
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
ranges.push(sel.getRangeAt(i));
}
}
return ranges;
};
restoreSelection = function(win, savedSelection) {
var sel = win.getSelection();
sel.removeAllRanges();
for (var i = 0, len = savedSelection.length; i < len; ++i) {
sel.addRange(savedSelection[i]);
}
};
} else if (document.selection && document.selection.createRange) {
// IE <= 8
saveSelection = function(win) {
var sel = win.document.selection;
return (sel.type != "None") ? sel.createRange() : null;
};
restoreSelection = function(win, savedSelection) {
if (savedSelection) {
savedSelection.select();
}
};
}
और मैं इसे इस तरह का उपयोग करें:
$('div').on('keyup paste', function(e) {
var ranges = saveSelection(window);
var newContent = /* Get the new HTML content */;
$('div').html(newContent);
restoreSelection(window, ranges);
});
एकदम सही है कि (पहली कड़ी काम किया है) –
इस समाधान के साथ बस एक बग देखा। सभी काम करता है लेकिन यदि आप div में एक नई पंक्ति के लिए एंटर दबाते हैं, तो कर्सर पिछली पंक्ति पर वापस सेट होता है (संभवत: दर्ज किए गए divs के कारण)। –
@ मैट रॉबर्ट्स: हाँ। इस विधि की सीमाएं हैं, जो केवल टेक्स्ट नोड्स पर आधारित होती हैं और इसलिए
'द्वारा निहित खाता लाइन ब्रेक नहीं लेती हैं और तत्वों को अवरुद्ध करती हैं। –