Phím xóa lùi không xóa các thẻ html bên trong của một DIV có thể chỉnh sửa được trong Firefox

Question

Tôi đã tạo một DIV với thuộc tính contenteditable = true và được thêm vào như "span" và "a" với các thuộc tính contenteditable = false. Muốn thử nghiệm nếu toàn bộ nút bị xóa với một backspace duy nhất và ngạc nhiên của tôi Firefox không thể xóa các yếu tố. Điều này cũng hoạt động như mong đợi trong tất cả các trình duyệt máy tính để bàn lớn ngoại trừ Firefox. Bất kỳ manh mối nào về điều này hoặc điều gì có thể là giải pháp có thể có?

Tìm thấy vấn đề chính xác trên bugzilla here.

Answer 1

OK! tìm ra giải pháp ... nó khá đơn giản hơn những gì bạn nghĩ. Tôi thực sự chèn html cho các liên kết, do đó, sử dụng <a> tại đây. Thẻ <a> có thuộc tính được đặt thành contenteditable = false và nó không bị xóa với một backspace. Vì vậy, tôi đã tạo ra một mức độ bên trong <span> với contenteditable = true cho firefox và điều đó đã thực hiện thủ thuật.

<div contentEditable="true"> 
    <a href="your/url/path" contentEditable="false"> 
    <span contentEditable="true">link here</span> 
    </a> 
</div> 

Điều này chỉ bắt buộc trong Firefox. Các trình duyệt khác xử lý điều này như mong đợi với khoảng thời gian có nội dung contenteditable = false.