contentEditable + SelectAll: Firefox sẽ không cho phép đầu vào bàn phím trên nội dung tạo động

Question

Tôi đang gặp một vấn đề trong Firefox (trình duyệt khác dường như làm việc tốt) với các yếu tố tạo động chứa một thuộc tính contenteditable="true":

Nếu tôi selectAll (hoặc động hoặc bằng chuột của tôi), Firefox sẽ không cho phép nhập bằng bàn phím.

Vui lòng xem số jsFiddle Example của tôi để tham khảo. Điều này dường như chỉ ảnh hưởng đến Firefox.

$(document).ready(function(){ 
$('.edit').live('dblclick', function() { 
    document.execCommand('selectAll',false,null); 
}); 

$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>'); 
}); 

EDIT: Đây là ứng dụng thực tế tôi đang làm việc trên (tha thứ bụi): cr8.me/app/ff.html - Những gì tôi đang muốn là click (nhấp đúp để chọn tất cả văn bản) Ghi Chú, Danh mục hoặc Tiêu đề kế hoạch để chỉnh sửa nó. Nó có hiệu quả với ai không? Có lẽ đó chỉ là cấu hình của tôi - hoặc kịch bản kém. Các dòng 137, 572 có liên quan.

Answer 1

Rõ ràng Firefox có vấn đề với contenteditable trên khoảng yếu tố (Tôi giả định rằng là trường hợp với màn hình khác: inline yếu tố, mặc dù tôi đã không kiểm tra nó). Sự cố có thể được giải quyết chỉ đơn giản bằng cách thay thế nhịp bằng số div. Hơn nữa - các div đó có thể có thuộc tính "display: inline" trên chúng bằng cách sử dụng css và vẫn hoạt động tốt.

Kiểm tra ví dụ làm việc tại đây: http://jsfiddle.net/6sTJh/5/. Nút có nhãn "Thêm lỗi" tự động thêm khoảng có thể chỉnh sửa và không hoạt động như mong đợi, trong khi nút "Thêm hoạt động" nối thêm div với thuộc tính có thể chỉnh sửa được và nó hoạt động tốt.

Vì vậy, là ứng dụng của bạn - khi tôi thay thế tất cả các nhịp có thể chỉnh sửa bằng div, chỉnh sửa chỉ hoạt động tốt trong firefox 3.6 và firefox 6.0.

Side lưu ý: Đối với mã ứng dụng của bạn - không sử dụng cùng một id trên nhiều nút (như bạn đang làm với id cùng "ghi chú danh hiệu" trên tất cả các lưu ý) hoặc bạn có thể nhận hành vi bất ngờ từ các trình duyệt khác nhau.

Quy tắc chung là bạn chỉ có thể có một phần tử có id đã cho trên một trang. Sử dụng lớp để "nhóm" nhiều hơn một thành phần và chọn chúng sau này.