Độ dài tối đa cho HTML <textarea>

Question

Làm cách nào để hạn chế số ký tự tối đa có thể được nhập vào HTML <textarea>? Tôi đang tìm giải pháp trình duyệt chéo.

Answer 1

Thẻ TEXTAREA không có thuộc tính MAXLENGTH theo cách mà thẻ INPUT thực hiện, ít nhất không có trong hầu hết các trình duyệt chuẩn. Một cách rất đơn giản và hiệu quả để hạn chế số ký tự có thể được gõ vào thẻ TEXTAREA là:

<textarea onKeyPress="return (this.value.length < 50);"></textarea> 

Lưu ý:onKeyPress, sẽ ngăn chặn bất kỳ nút bấm, bất kỳ nútbao gồm phím xóa.

Điều này hoạt động vì biểu thức Boolean so sánh chiều dài của trường trước khi ký tự mới được thêm vào độ dài tối đa bạn muốn (50 trong ví dụ này, sử dụng riêng của bạn tại đây) và trả về true nếu có chỗ cho một nữa false nếu không. Trả về false từ hầu hết các sự kiện sẽ hủy hành động mặc định. Vì vậy, nếu độ dài hiện tại đã là 50 (hoặc nhiều hơn), trình xử lý trả về false, hành động KeyPress bị hủy và ký tự không được thêm vào.

Một bay trong thuốc mỡ là khả năng dán vào TEXTAREA, không gây ra sự kiện KeyPress để kích hoạt, phá vỡ kiểm tra này. Internet Explorer 5+ chứa sự kiện onPaste có trình xử lý có thể chứa séc . Tuy nhiên, lưu ý rằng bạn cũng phải tính đến số lượng ký tự đang chờ trong khay nhớ tạm thời để biết tổng số sẽ là có vượt quá giới hạn hay không. May mắn thay, IE cũng chứa một đối tượng clipboard từ đối tượng cửa sổ. 1 Như vậy:

<textarea onKeyPress="return (this.value.length < 50);" 
onPaste="return ((this.value.length + 
window.clipboardData.getData('Text').length) < 50);"></textarea> 

Một lần nữa, sự kiện onPaste và clipboardData đối tượng là IE 5+ chỉ. Đối với giải pháp trình duyệt chéo, bạn sẽ chỉ phải sử dụng trình xử lý OnChange hoặc OnBlur để kiểm tra độ dài và xử lý nó theo cách bạn muốn (cắt bớt giá trị âm thầm, thông báo cho người dùng, v.v.). Thật không may, điều này không bắt lỗi như nó đang xảy ra, chỉ khi người dùng cố gắng rời khỏi trường, mà không phải là khá thân thiện.

Source

Ngoài ra, có một cách khác ở đây, trong đó có một kịch bản đã hoàn thành, bạn có thể đưa vào trang của bạn:

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

Answer 2

HTML5 bây giờ cho phép maxlength attribute on <textarea>.

Nó được hỗ trợ bởi tất cả các trình duyệt ngoại trừ IE < = 9 và iOS Safari 8.4. Xem support table on caniuse.com.

Answer 3

$(function(){ 
    $("#id").keypress(function() { 
    var maxlen = 100; 
if ($(this).val().length > maxlen) { 
    return false; 
} 
}) 
}); 

Reference Set maxlength in Html Textarea