Đánh dấu/chọn nhiều div có phạm vi w/có thể chỉnh sửa được?

Question

Giả sử tôi có một bộ số contenteditable="true" số div.

<div id="0" contenteditable="true"></div> 
<div id="1" contenteditable..></div> 
<div...etc></div> 

Tôi không thể có một div, nhiều div là phải. Làm cách nào để đánh dấu nội dung của nhiều hơn một div? Sử dụng phạm vi? Còn gì nữa không?

Answer 1

Câu trả lời là tùy thuộc vào trình duyệt. Xem this example để kiểm tra hai phương pháp sử dụng Ranges. Những nỗ lực đầu tiên để tạo một Phạm vi cho mỗi chỉnh sửa có thể chỉnh sửa <div> và thêm tất cả chúng vào lựa chọn. Lần thử thứ hai để tạo một Phạm vi đơn bao gồm nội dung của hai số <div> s có thể chỉnh sửa.

Kết quả:

• Trong tất cả các trình duyệt, nó là không thể cho người sử dụng để tạo ra một sự lựa chọn sống trong nhiều hơn một yếu tố có thể chỉnh sửa;
• Firefox là trình duyệt dễ chấp nhận nhất của các trình duyệt chính. Cả hai phương thức lập trình đều hoạt động.
• Safari và Chrome ít được phép nhất: cả phương pháp đều không chọn nội dung từ nhiều yếu tố có thể chỉnh sửa.
• Opera 11 không hỗ trợ nhiều Dải ô trong vùng lựa chọn, nhưng không hỗ trợ Phạm vi được chọn bao gồm nhiều phần tử có thể chỉnh sửa.
• IE phiên bản trước 9 không hỗ trợ phạm vi DOM hoặc cùng một API Selection giống như các trình duyệt khác, nhưng mã TextRange tương đương không cho phép lựa chọn từ nhiều yếu tố có thể chỉnh sửa.

Answer 2

Có thể chuyển các div sang số contenteditable="false" khi đang bắt đầu lựa chọn một trong số chúng. Nội dung như thế này cung cấp cho bạn ý tưởng (sử dụng JQuery):

$('div').bind("selectstart", function() { 
    $('div').attr("contenteditable", false); 
});​ 

Here's a fiddle to demonstrate (chỉ được thử nghiệm trong Chrome).

Lưu ý trong ví dụ fiddle rằng ContentEditable Div đầu tiên lấy tiêu điểm. Điều này cho phép bạn loại bỏ như bình thường, nhưng ngay sau khi bạn chọn bất cứ điều gì, bằng cách sử dụng chuột hoặc bàn phím, bạn sẽ thấy bạn có thể mở rộng lựa chọn trên divs như bình thường.

Điều này rõ ràng là cần tìm ra để làm việc với nhiều trình duyệt và quay lại contenteditable="true" một cách thích hợp. Nhưng tôi nghĩ cách tiếp cận này là hợp lệ.