Ngăn chặn đầu vào trên ô bảng sau khi đạt độ rộng cố định?

Question

Tôi muốn ngăn đầu vào bổ sung trên ô bảng HTML sau khi đã đạt đến chiều rộng.

Bảng có bố cục cố định, không có lớp bọc và chiều rộng cụ thể. Lỗi tràn hiện được đặt thành ẩn.

Có thể lọc (và cuối cùng là ngăn chặn) đầu vào để nó dừng ở độ rộng cố định để không có tràn (ẩn hoặc cách khác). Tôi hiện đang lọc trở lại vận chuyển bằng cách sử dụng jQuery để các tế bào sẽ không mở rộng đến dòng bổ sung.

Có lẽ tôi đang đòi hỏi quá nhiều từ một bảng HTML ...

Answer 1

Một giải pháp khả thi là để sao chép các nội dung di động trên keydown trong một lĩnh vực ẩn và để tính giá trị của lĩnh vực này:

$("table input").on("keydown", function(e) { 
    $("#copy").text(this.value); 

    var width = $("#copy").outerWidth(); 
    console.log("w: " + width); 

    var code = e.keyCode ? e.keyCode : e.which; 
    if (width > 50 && code !== 8 && code !== 49) { 
     return false; 
    } 
}); 

Tôi đã tạo ra một câu đố với giải pháp như vậy: http://jsfiddle.net/scaillerie/hnRjB/2/.

Một điểm cần lưu ý là các font-family và font-size nên giống nhau trong input và trong div để có giá trị chính xác, đó là lý do của sự cai trị CSS:

* { 
    font-family: arial; 
    font-size: 1em; 
} 

Nhưng thay vì *, bạn nên hạn chế để phù hợp với nhu cầu của mình (ví dụ: table input, #copy).

---

EDIT:

Chỉ cần lưu ý rằng với mã này, người dùng có thể nhập chỉ hơn độ dài đầu vào, nhưng bạn có thể thêm một số "dài" nhân vật đến lĩnh vực sao chép của bạn, để kiểm tra chiều rộng: http://jsfiddle.net/scaillerie/hnRjB/3/.