Thực hiện một <br> thay vì <div></div> bằng cách nhấn Enter trên một contenteditable

Question

Tôi đã viết một chút mã trong xử lý sự kiện bàn phím của tôi để chèn một <br> để đáp ứng với báo chí của phím Enter:

event.preventDefault(); 
document.execCommand('InsertHTML', true, '<br>'); 

này chỉ hoạt động nếu con trỏ nằm giữa hai chữ cái, nếu nó ở cuối thì tôi cần hai số <br> -Elements. Tôi có thể phát hiện nếu tôi đang ở cuối dòng không? Hoặc một số ý tưởng làm việc khác cho vấn đề Enter?

Tôi cũng đã cố gắng nắm bắt sự kiện quan trọng bình thường (nhấn nút ctrl-Key) và tạo một sự kiện bàn phím với JS, trong đó nhấn phím Enter cùng với ctrl. Nhưng công việc Dosn't này ...

Nó chỉ có để làm việc trong Webkit/Safari ...

Answer 1

Để giải quyết vấn đề của bạn, luôn luôn giữ một yếu tố BR là yếu tố cuối cùng của div contenteditable của bạn. Điều này sẽ đảm bảo hành vi dự đoán được khi tiêm một phần tử br so với trình duyệt mặc định của các phần tử div tiêm. Bạn có thể kiểm tra lastChild về khóa và di chuột để đảm bảo đó là phần tử br. Giả sử bạn có một tài liệu như:

<div id="editable" contenteditable="true"></div> 

Bạn có thể sử dụng JavaScript sau (w/jQuery 1.4+) để giữ cho một yếu tố BR là yếu tố cuối cùng và tiêm một yếu tố BR thay vì div div:

$(function(){ 

    $("#editable") 

    // make sure br is always the lastChild of contenteditable 
    .live("keyup mouseup", function(){ 
     if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") { 
     this.appendChild(document.createChild("br")); 
     } 
    }) 

    // use br instead of div div 
    .live("keypress", function(e){ 
     if (e.which == 13) { 
     if (window.getSelection) { 
      var selection = window.getSelection(), 
       range = selection.getRangeAt(0), 
       br = document.createElement("br"); 
      range.deleteContents(); 
      range.insertNode(br); 
      range.setStartAfter(br); 
      range.setEndAfter(br); 
      range.collapse(false); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
      return false; 
     } 
     } 
    }); 

}); 

Được thử nghiệm trên Apple OS X w/Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Hãy thử sử dụng ierange để làm việc này trong Windows Internet Explorer.

Answer 2

Tôi sẽ liên kết một hàm với sự kiện khóa để xóa và thay đổi thành
bằng regEx. Vì vậy, ngay cả khi nó tạo ra đánh dấu lạ, nó sẽ được cố định.

Sử dụng jQuery:

$('.myEditable').keyup(function(){ 
    var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>'); 
    $(this).text(sanitazed); 
});