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.Độ dài tối đa cho HTML <textarea>
Trả lời
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.
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
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.
@erdomester Nó đang hoạt động trên các trình duyệt được hỗ trợ. Bạn có thể kiểm tra trong liên kết w3c mà tôi đã cung cấp. – indusBull
Tôi đã thử nó và nó hoạt động ngay cả khi tôi sử dụng maxlength = "500px". Nhưng liên kết bạn cung cấp không hoạt động khi tôi đăng nhận xét đó và trang được hiển thị là (tôi đoán) hiển thị các thuộc tính khác so với liên kết hiển thị ngay bây giờ. – erdomester
Liên kết đó không phải với W3C, nó là W3Schools, được biết đến với việc đưa ra thông tin không chính xác. – Toby
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
Reference Set maxlength in Html Textarea
- 1. độ dài tối đa của html textbox là gì
- 2. Độ dài byte tối đa []?
- 3. Độ dài ký tự tối đa UUID
- 4. Độ dài tối đa của SQL CE
- 5. Độ dài tối đa của một openID
- 6. Thêm "Độ dài tối đa" vào Regex
- 7. Android EditText Độ dài tối đa
- 8. có kích thước tối đa cho độ dài của đầu vào bị ẩn trong html không?
- 9. Độ dài tối đa của mục mô tả RSS
- 10. Độ dài tối đa của biến chuỗi trong Android
- 11. Độ dài tối đa của thuộc tính tiêu đề
- 12. Biểu mẫu nhiều phần HTML - độ dài tối đa của chuỗi "ranh giới"?
- 13. Thay đổi độ dài tối đa của cột VARCHAR?
- 14. Độ dài mật khẩu người dùng tối đa của MySQL
- 15. JSON Tối đa vấn đề về độ dài với ASP.NET
- 16. Độ dài tối đa của SID ở định dạng SDDL
- 17. Do ArrayBuffers có độ dài tối đa không?
- 18. độ dài yêu cầu tối đa trong node.js
- 19. Độ dài tối đa của chuỗi Sqlite Android?
- 20. Độ dài tối đa của chuỗi dòng lệnh
- 21. Độ dài tối đa của truy vấn SQL
- 22. Độ dài tối đa của phiên bản rfc 4122 4
- 23. Giới hạn độ dài nội dung chuỗi tối đa (8192)
- 24. Lỗi trình tải SQL: "Trường độ dài thay đổi vượt quá độ dài tối đa".
- 25. Độ dài tuyên bố tối đa trong Oracle
- 26. Độ dài tối đa của tên bảng trong MySQL
- 27. Độ dài tối đa của tên cột trong MySQL
- 28. Độ dài tối đa của một ListProperty là bao nhiêu?
- 29. Đặt độ dài tối đa của một TextBlock trong XAML
- 30. Độ dài tối đa của tên facebook là bao nhiêu?
Lưu ý rằng chức năng OnKeyPress viết ở trên sẽ ngăn chặn bất kỳ văn bản từ được nhập vào textarea lần giới hạn ký tự được nhấn - không có ký tự có thể bị xóa. Đoạn mã mạnh mẽ hơn sẽ cho phép người dùng đạt đến giới hạn tối đa và sau đó lùi lại để xóa các ký tự để nhận văn bản trong giới hạn. – shek
Có lẽ nó chỉ là tôi và arithmetics xấu của tôi, nhưng tôi có ấn tượng rằng khi sử dụng dòng mới trong textareas, IE và FF hành xử khác nhau từ Chrome liên quan đến 'maxlength'. Phải thực hiện với vấn đề '\ r \ n' so với' \ n' (khi văn bản của bạn chứa các dòng mới) ... Chắc chắn, 'maxlength' dường như không hoạt động trên trình duyệt chéo trên Windows từ trải nghiệm của tôi. .. Nhưng không có gì mới ở đây, chỉ cần cùng một công cụ HTML/JS lỗi cũ ... – user2173353