Lắng nghe các sự kiện của phần tử HTML có thể chỉnh sửa

Question

Tôi đang cố gắng tìm hiểu xem có cách nào để nghe các sự kiện như focus hoặc change của phần tử HTML có thuộc tính contenteditable hay không.

Tôi có đánh dấu này html:

<p id="test" contenteditable >Hello World</p> 

Tôi đã thử những mà không thành công (JSBin):

var test = document.querySelector('#test'); 
test.addEventListener('change', function(){ 
    alert('content edited'); 
}, false); 
test.addEventListener('DOMCharacterDataModified', function(){ 
    alert('content edited'); 
}, false); 
test.addEventListener('focus', function(){ 
    alert('content edited'); 
}, false); 

Tôi không muốn nghe bàn phím hoặc chuột sự kiện. Tôi không tìm thấy bất kỳ tài liệu rõ ràng nào trong số W3C và MDN về contenteditable.

Có thể nghe change và focus hoặc các sự kiện khác trên phần tử HTML có thể chỉnh sửa nội dung không?

Answer 1

Không thực sự. Không có sự kiện change cho các yếu tố contenteditable và cũng không có sự kiện HTML5 input, mặc dù tôi nghĩ rằng sự kiện đó cuối cùng sẽ xuất hiện. Đó là một nỗi đau.

---

CẬP NHẬT 23 Tháng sáu 2012

WebKit gần đây hỗ trợ các sự kiện HTML5 input trên contenteditable yếu tố, cũng như Firefox 14.

---

focus Tuy nhiên, làm việc, cũng như DOMCharacterDataModified trong hầu hết các trình duyệt (mặc dù đáng chú ý là không phải là IE < 9). Xem http://jsfiddle.net/UuYQH/112/

Bằng cách này, contenteditable không phải là thuộc tính Boolean: nó yêu cầu giá trị, phải là một trong "true", "false", "inherit" và chuỗi trống (tương đương với "true")).

Answer 2

Tôi biết điều này là khá muộn nhưng jQuery dường như để làm việc với tập trung, kiểm tra ví dụ này ra:

http://jsfiddle.net/powerphillg5/EGtSC/

$("#test").focus(function(){ 
    $("#log").append("<li>Item Focused</li>"); 
}); 

Tôi hy vọng điều này sẽ giúp, nhưng nếu nó không phải là những gì bạn đang tìm kiếm tôi sẽ khiêm tốn chấp nhận phiếu bầu.

Answer 3

Làm mờ (khi khu vực mất tiêu điểm) và tập trung cả hai hoạt động. Ít nhất với jQuery. Thử nghiệm với Chrome 28 và Safari 6.

$("#test").blur(function(){ 
    $("#log").append("<li>Item lost focus</li>"); 
}); 

Answer 4

contenteditable đã được giới thiệu cách trở lại trong trình duyệt IE 5.5, nó được hỗ trợ bởi JavaScript 1.1/1.2 API và ứng dụng đầu tiên iframe, sau đó để Bảo hiểm tiền gửi. Nó được hỗ trợ trong tất cả các trình duyệt ở một mức độ nào đó. Bây giờ trong HTML5 spec hầu hết các yếu tố có thể chấp nhận thuộc tính này (nhưng hãy cẩn thận tương thích ngược). hỗ trợ sự kiện onchange có thể áp dụng vẫn để tạo thành các phần tử như ban đầu được thiết kế, ít có liên quan đến thuộc tính này. Tùy chọn của bạn vẫn là các sự kiện nhấn phím, dễ nắm bắt và khi được kết hợp với một kiểm tra cho các phần tử đích, bạn sẽ có kết quả tương tự với việc thay đổi. Nó có thể không được lý tưởng cho các trường hợp cạnh nhưng đối với hầu hết các trường hợp sử dụng tôi sẽ đi tuyến đường này và tương thích ngược nhất của nó quá.