Tôi đã tìm kiếm trên Google hơn một tuần nay, tôi đã cố gắng triển khai các giải pháp khác nhau, nhưng không thành công của tôi.contenteditable - Chọn 2 đoạn con và viết văn bản (Firefox Issue)
Vì vậy, bạn có div có thể chỉnh sửa được bằng một số đoạn (hoặc các phần tử con khác cùng loại). Rõ ràng đây là loại bố cục bạn muốn giữ. Nếu người sử dụng chọn hai hoặc nhiều đoạn văn và các loại văn bản trên nó, nó loại bỏ các đoạn văn và cài đặt lấy nét caret bên trong div cha mẹ:
body {
font-family: georgia;
}
.editable {
color: red;
}
.editable p {
color: #333;
}
.editable span {
color: limegreen !important;
}<div class="editable" contenteditable><p>paragraph one</p><p>paragraph two</p></div>
<hr>
<p>How to reproduce the bug:</p>
<ul>
<li>Focus the contenteditable above by placing the cursor somewhere in one of the two paragraphs.</li>
<li>press ctrl-a (in windows or linux) or cmd-a (in osx) to select-all</li>
<li>type some text</li>
<li>red text means that the text went directly inside the contenteditable div, black text means it went inside a paragraph</li>
</ul>
<p>The correct behaviour should be that that select-all and delete (or "type-over") in a contenteditable with only block tags should leave the cursor inside the first block tag.</p>
<p>Webkit gets this right, Firefox gets it wrong.</p>Tôi đã thử một cái gì đó như thế này trong Jquery:
$(document).on('blur keyup','div[contenteditable="true"]',function(event){
var sel = window.getSelection();
var activeElement = sel.anchorNode.parentNode;
var tagName = activeElement.tagName.toLowerCase();
if (!(tagName == "p" || tagName == "span")) {
console.log('not on editable area');
event.preventDefault();
//remove window selection
var doselect = window.getSelection();
doselect.removeAllRanges();
}
});
Vì vậy, sau mờ hoặc sự kiện KeyUp trên contenteditable, phát hiện nơi vị trí dấu nháy và các khu vực có thể chỉnh sửa nếu nó bên ngoài chấp nhận dừng sự kiện hoặc một cái gì đó?
Tôi đã thử thay đổi phạm vi lựa chọn và một loạt các nội dung khác nhưng có thể tôi không thấy nó. Tôi chắc rằng rất nhiều người đã gặp vấn đề tương tự, nhưng câu trả lời duy nhất tôi tìm thấy trên Google hoặc ở đây là "nội dung có thể chỉnh sửa được", "tại sao bạn không chỉ sử dụng trình soạn thảo nguồn mở" và loại nội dung đó.
Firefox hành vi kỳ lạ: Chèn thẻ BR trên ngắt dòng Tôi cũng đã cố gắng để loại bỏ hành vi Firefox'es lạ với một chức năng để loại bỏ tất cả các <BR> thẻ firefox sẽ tự động chèn. Như thế này:
function removeBr(txteditor) {
var brs = txteditor.getElementsByTagName("br");
for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); }
}
Vì vậy, tôi gắn liền này cho một sự kiện keydown, và nó thực hiện chính xác những gì nó mong đợi, tuy nhiên gây ra hành vi kỳ lạ hơn (như ngăn cản bạn thêm không gian trên đoạn được chọn).
Vui lòng bỏ phiếu cho câu hỏi để chúng tôi có thể nâng cao nhận thức hơn.
Tôi chắc chắn có rất nhiều người khác đã gặp phải vấn đề tương tự, tôi nghĩ rằng sẽ tốt hơn nếu biết cách giải quyết hoặc có cách "đúng" để thực hiện. Tôi nghĩ rằng nó thực sự cần được thảo luận ...
Không có tiêu chuẩn do đó, nó không công bằng để gọi hành vi của Firefox "sai". –