đặt maxlength bằng cách sử dụng javascript

Question

Tôi đang cố gắng đặt độ dài tối đa trên các trường nhập động bằng JavaScript. Rõ ràng đó là một vấn đề trong IE, và tôi đã tìm thấy một phần của giải pháp.

$("input#title").get(0).setAttribute("max_length", 25); 
$("input#title").get(0).setAttribute(
         "onkeypress", 
         "return limitMe(event, this)"); 

function limitMe(evt, txt) { 
    if (evt.which && evt.which == 8) return true; 
    else return (txt.value.length < txt.getAttribute("max_length"); 
} 

Nó hoạt động trong Firefox, nhưng không có trong IE vì lý do nào đó. Tuy nhiên, nó hoạt động trên các trường nhập được đặt như sau:

<input type="text" max_length="25" onkeypress="return limitMe(event, this);"/> 

Nhưng vì các trường nhập được tạo động, tôi không thể làm điều này ... Bất kỳ ý tưởng nào?

Answer 1

Nếu bạn đang sử dụng jQuery thì tại sao không tận dụng tối đa các tóm tắt của nó?

Ví dụ:

Thay vì:

$("input#title").get(0).setAttribute("max_length", 25); 
$("input#title").get(0).setAttribute(
         "onkeypress", 
         "return limitMe(event, this)"); 
function limitMe(evt, txt) { 
    if (evt.which && evt.which == 8) return true; 
    else return (txt.value.length < txt.getAttribute("max_length"); 
} 

Làm điều này:

$('input#title').attr('maxLength','25').keypress(limitMe); 

function limitMe(e) { 
    if (e.keyCode == 8) { return true; } 
    return this.value.length < $(this).attr("maxLength"); 
} 

---

Edit: Lý do nó không làm việc trong IE có lẽ vì cách bạn kèm theo xử lý 'OnKeyPress', qua setAttribute. - Đây không phải là cách thích hợp để đăng ký trình xử lý sự kiện.

Answer 2

Thuộc tính bạn đang tìm kiếm là maxlength, không phải max_length. Xem here.

Answer 3

Đừng quên rằng nếu bạn đang đặt độ dài tối đa qua JavaScript, người khác cũng có thể dễ dàng thay đổi độ dài tối đa thành bất kỳ thứ gì họ thích. Bạn sẽ vẫn cần xác thực dữ liệu đã gửi trên máy chủ.

Answer 4

Vì tôi đã gặp một số rắc rối với câu trả lời từ @James, tôi đã viết sth làm việc ngay cả khi các công cụ sao chép, và đặc biệt khi làm việc với IE8 trở xuống. Việc triển khai của tôi sử dụng jQuery và các sự kiện trực tiếp của jQuery.

jQuery(function() { 
    $('body').on('keydown.maxlength_fix', 'textarea[maxlength]', function (e) { 
     var $this = $(this); 
     window.setTimeout(function() { 
      var val = $this.val(); 
      var maxlength = $this.attr('maxlength'); 
      if (val.length > maxlength) { 
       $this.val(val.substr(0, maxlength)); 
      } 
     }, 4); 
    }); 
}); 

Answer 5

Mã của tôi cũng in ra các ký tự viết/tối đa, bỏ qua phần đó.

$("[maxlength]").bind("keyup focusin", function(){ 
    var maxkey = $(this).attr("maxlength"); 
    var length = $(this).val().length; 
    var value = $(this).val(); 
    $(this).parent().find(".counter").text(length+"/"+maxkey); 
    if (length > maxkey) $(this).val(value.substring(0, maxkey)); 
}).bind("focusout", function(){$(this).parent().find(".counter").text("")}); 

Answer 6

IE là trường hợp nhạy cảm trên setAttribute() và chỉ "maxLength" hoạt động ...

var el=document.createElement('input'); el.setAttribute('maxLength',25); 

Answer 7

Tất cả các câu trả lời ở đây dựa trên các sự kiện bấm phím/dán. Đây là giải pháp của tôi khi sử dụng sự kiện input:

$('input').on('input', onInput); 

var inputValue = ''; 

function onInput(e) { 
    if(e.currentTarget.value.length > 30) { 
     e.currentTarget.value = titleValue; 
     return; 
    } 

    inputValue = e.currentTarget.value; 
}