Tôi gặp sự cố không bình thường với tài liệu IE có contentEditable được đặt thành true. Gọi select() trên một phạm vi được đặt ở cuối của một nút văn bản ngay trước một phần tử khối làm cho việc lựa chọn được dịch chuyển sang đúng một ký tự và xuất hiện ở nơi nó không nên. Tôi đã gửi một lỗi cho Microsoft chống lại IE8. Nếu bạn có thể, hãy bỏ phiếu cho vấn đề này để nó có thể được sửa.Phương thức chọn lựa TextRange của IE không hoạt động đúng cách
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=390995
Tôi đã viết một trường hợp thử nghiệm để chứng minh hiệu lực:
<html>
<body>
<iframe id="editable">
<html>
<body>
<div id="test">
Click to the right of this line ->
<p id="par">Block Element</p>
</div>
</body>
</html>
</iframe>
<input id="mytrigger" type="button" value="Then Click here to Save and Restore" />
<script type="text/javascript">
window.onload = function() {
var iframe = document.getElementById('editable');
var doc = iframe.contentDocument || iframe.contentWindow.document;
// An IFRAME without a source points to a blank document. Here we'll
// copy the content we stored in between the IFRAME tags into that
// document. It's a hack to allow us to use only one HTML file for this
// test.
doc.body.innerHTML = iframe.textContent || iframe.innerHTML;
// Marke the IFRAME as an editable document
if (doc.body.contentEditable) {
doc.body.contentEditable = true;
} else {
var mydoc = doc;
doc.designMode = 'On';
}
// A function to demonstrate the bug.
var myhandler = function() {
// Step 1 Get the current selection
var selection = doc.selection || iframe.contentWindow.getSelection();
var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
// Step 2 Restore the selection
if (range.select) {
range.select();
} else {
selection.removeAllRanges();
selection.addRange(range);
doc.body.focus();
}
}
// Set up the button to perform the test code.
var button = document.getElementById('mytrigger');
if (button.addEventListener) {
button.addEventListener('click', myhandler, false);
} else {
button.attachEvent('onclick', myhandler);
}
}
</script>
</body>
</html>
Vấn đề là tiếp xúc trong các chức năng myhandler. Đây là tất cả những gì tôi đang làm, không có Bước 3 ở giữa lưu và khôi phục lựa chọn, và con trỏ di chuyển. Nó dường như không xảy ra trừ khi vùng chọn trống (ví dụ: tôi có một con trỏ nhấp nháy, nhưng không có văn bản), và nó dường như chỉ xảy ra bất cứ khi nào con trỏ ở cuối nút văn bản ngay trước nút khối.
Dường như phạm vi vẫn ở đúng vị trí (nếu tôi gọi parentElement trên phạm vi trả về div), nhưng nếu tôi nhận được dải ô mới từ vùng chọn hiện tại, phạm vi mới nằm trong thẻ đoạn, và đó là parentElement của nó.
Làm cách nào để giải quyết vấn đề này và liên tục lưu và khôi phục lựa chọn trong trình khám phá internet?
Đã dành chút thời gian cho vấn đề này, tôi đã thuyết phục một cách hợp lý rằng không có cách nào để đặt dấu mũ ở cuối nút văn bản ngay trước phần tử khối. –