Trình kích hoạt Javascript trên "KeyPress" và "Paste"

Question

Tôi có JavaScript kiểm tra xem trường có bằng 15 ký tự hay không và nút không được gửi có chuyển sang màu xám không. Điều này hoạt động perfetcly nếu tôi gõ 15 ký tự bằng tay, nhưng không nếu tôi dán 15 ký tự. Làm cách nào để tôi kiểm tra ngay cả khi nội dung được dán trong trường?

Tôi có thể kiểm tra ký tự định kỳ (giây) hoặc có chức năng "kiểm tra dán" không?

kịch bản của tôi:

<script type="text/javascript"> 
jQuery(document).ready(function($){ 
$('input[type=submit]').attr("disabled","disabled"); 
$('input[name="item_meta[1234]"]').keypress(function() { //change # to the ID of your field 
     if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected 
       $('input[type=submit]').attr("disabled","disabled"); 
     } else { //enable the submit button 
       $('input[type=submit]').removeAttr('disabled'); 
     } 
    }); 
}); 
</script> 

<form> 
<div id="frm_field_1234_container" class="frm_form_field form-field frm_required_field frm_top_container"> 
<label class="frm_primary_label">Minimun 15 char: 
    <span class="frm_required"></span> 
</label> 
<input type="text" id="field_ygtw9u" name="item_meta[1234]" value="" maxlength="15" class="required"/> 

<p class="submit"> 
<input type="submit" value="Submit" /> 
</p> 
</form> 

Answer 1

Thay đổi keypress-keyup và nó sẽ làm việc.

Answer 2

Bạn nên sử dụng propertychange (IE) và input sự kiện. Live Demo

$('input[name="item_meta[1234]"]').bind("input", function() { //change # to the ID of your field 
    if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected 
      $('input[type=submit]').attr("disabled","disabled"); 
    } else { //enable the submit button 
      $('input[type=submit]').removeAttr('disabled'); 
    } 
}); 

$('input[name="item_meta[1234]"]').bind("propertychange", function() { //change # to the ID of your field 
    if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected 
      $('input[type=submit]').attr("disabled","disabled"); 
    } else { //enable the submit button 
      $('input[type=submit]').removeAttr('disabled'); 
    } 
}); 

Answer 3

Hãy thử một cái gì đó giống như

var $submit = $('input[type=submit]').attr("disabled","disabled"); 
$('input[name="item_meta[1234]"]').keyup(function() { //change # to the ID of your field 
    var $this = $(this); 
    if ($this.val().length < 14) { //disable submit if "no" is selected 
     $submit.attr("disabled","disabled"); 
    } else { //enable the submit button 
     $submit.removeAttr('disabled'); 
    } 
    }); 

$('#field_ygtw9u').on('paste', function(e){ 
    var $this = $(this); 
    setTimeout(function() { 
     if ($this.val().length < 14) { //disable submit if "no" is selected 
      $submit.attr("disabled","disabled"); 
     } else { //enable the submit button 
      $submit.removeAttr('disabled'); 
     } 
    }, 0); 
}); 

Demo: Fiddle

Không sử dụng keypress sự kiện vì nó sẽ không bị sa thải trong khi bấm backspace trong IE/Chrome

Answer 4

Tested, làm việc. Fiddle: http://jsfiddle.net/fnkr/MXnuk/

<script type="text/javascript"> 
    function checkInput() { 
     if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected 
       $('input[type=submit]').attr("disabled", "disabled"); 
      } else { //enable the submit button 
       $('input[type=submit]').removeAttr('disabled'); 
      } 
    } 

    jQuery(document).ready(function ($) { 
     $('input[type=submit]').attr("disabled", "disabled"); 
     $('input[name="item_meta[1234]"]').bind("input", function() { //change # to the ID of your field 
      checkInput();  
     }); 

     $('input[name="item_meta[1234]"]').bind("propertychange", function() { //change # to the ID of your field 
      checkInput(); 
     }); 
    }); 
</script> 

<form> 
    <div id="frm_field_1234_container" class="frm_form_field form-field frm_required_field frm_top_container"> 
     <label class="frm_primary_label">Minimun 15 char: <span class="frm_required"></span> 

     </label> 
     <input type="text" id="field_ygtw9u" name="item_meta[1234]" value="" maxlength="15" 
     class="required" /> 
     <p class="submit"> 
      <input type="submit" value="Submit" /> 
     </p> 
</form>