将值粘贴到输入区域时，无法捕获值

Question

我有一个按钮和一个输入区域。当输入的长度被填满（14） - 那么按钮的类将被激活。然而，当用户将一个值粘贴到输入区域时，当前工作正常，直到用户输入其他内容为止，长度为零。我的目标是在按钮上显示当前上课的时候糊做，如果该值的长度是14

JS

$('#number', '#form') 
    .keydown(function (e) { 
    var key = e.charCode || e.keyCode || 0; 
    $phone = $(this); 
    $len = $phone.val().length; 
    console.log($len); 
    // Auto-format 
    if (key !== 8 && key !== 9) { 
     if ($phone.val().length === 13){ 
      $('#form div a:eq(0)').removeClass('inactive'); 
     } 
     if (($phone.val().length === 14) && (key == 13)){ 
      e.preventDefault(); 
      $('#form div a:eq(0)').trigger('click'); 
     } 
     if ($phone.val().length < 13){ 
      $('#form div a:eq(0)').addClass('inactive'); 
     } 
    } 
    if (key == 8){ 
     $('#form div a:eq(0)').addClass('inactive'); 
    } 

    // Allow numeric, tab, backspace, delete, and arrow keys only 
    return (
     key == 8 || 
     key == 9 || 
     key == 46 || 
     key == 86 || //copy+paste 
     key == 67 || 
     key == 17 || 
     key == 91 || // end 
     (key >= 37 && key <= 40)|| 
     (key >= 48 && key <= 57) || 
     (key >= 96 && key <= 105) 
    ); 
}); 

document.getElementById('number').addEventListener('input', function (e) { 
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/); 
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : ''); 
}); 

HTML

 <form id="form"> 
      <input id="number" type="text" maxlength="14" placeholder='(100) 100-1000'> 
      <div> 
       <a class='bt inactive'>Enter</a> 
      </div> 
     </form> 

Answer 1

您应该使用input事件。当输入发生变化时，会触发此事件。即使输入没有改变，keyup和​​也会启动。即使没有变化，按CTRL也会触发​​。如果它已经改变了input才会被触发，即：CTRL + V（粘贴）

$('#number', '#form') 
 
    .on('input', function (e) { 
 
    var key = e.charCode || e.keyCode || 0; 
 
    $phone = $(this); 
 
    $len = $phone.val().length; 
 
    console.log($len); 
 
    // Auto-format 
 
    if (key !== 8 && key !== 9) { 
 
     if ($phone.val().length === 13){ 
 
      $('#form div a:eq(0)').removeClass('inactive'); 
 
     } 
 
     if (($phone.val().length === 14) && (key == 13)){ 
 
      e.preventDefault(); 
 
      $('#form div a:eq(0)').trigger('click'); 
 
     } 
 
     if ($phone.val().length < 13){ 
 
      $('#form div a:eq(0)').addClass('inactive'); 
 
     } 
 
    } 
 
    if (key == 8){ 
 
     $('#form div a:eq(0)').addClass('inactive'); 
 
    } 
 

 
    // Allow numeric, tab, backspace, delete, and arrow keys only 
 
    return (
 
     key == 8 || 
 
     key == 9 || 
 
     key == 46 || 
 
     key == 86 || //copy+paste 
 
     key == 67 || 
 
     key == 17 || 
 
     key == 91 || // end 
 
     (key >= 37 && key <= 40)|| 
 
     (key >= 48 && key <= 57) || 
 
     (key >= 96 && key <= 105) 
 
    ); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
      <input id="number" type="text" maxlength="14" placeholder='(100) 100-1000'> 
 
      <div> 
 
       <a class='bt inactive'>Enter</a> 
 
      </div> 
 
     </form>

Answer 2

还可以使用其他事件input所以它会在keydown和input上触发你的函数。看看这个工作示例使用您的代码

$('#number', '#form').on('keydown input',function(){}); 

$('#number', '#form') 
 
    .on('keydown input', function (e) { 
 
    var key = e.charCode || e.keyCode || 0; 
 
    $phone = $(this); 
 
    $len = $phone.val().length; 
 
    console.log($len); 
 
    // Auto-format 
 
    if (key !== 8 && key !== 9) { 
 
     if ($phone.val().length === 13){ 
 
      $('#form div a:eq(0)').removeClass('inactive'); 
 
     } 
 
     if (($phone.val().length === 14) && (key == 13)){ 
 
      e.preventDefault(); 
 
      $('#form div a:eq(0)').trigger('click'); 
 
     } 
 
     if ($phone.val().length < 13){ 
 
      $('#form div a:eq(0)').addClass('inactive'); 
 
     } 
 
    } 
 
    if (key == 8){ 
 
     $('#form div a:eq(0)').addClass('inactive'); 
 
    } 
 

 
    // Allow numeric, tab, backspace, delete, and arrow keys only 
 
    return (
 
     key == 8 || 
 
     key == 9 || 
 
     key == 46 || 
 
     key == 86 || //copy+paste 
 
     key == 67 || 
 
     key == 17 || 
 
     key == 91 || // end 
 
     (key >= 37 && key <= 40)|| 
 
     (key >= 48 && key <= 57) || 
 
     (key >= 96 && key <= 105) 
 
    ); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <input id="number" type="text" maxlength="14" placeholder='(100) 100-1000'><br /><br /> 
 
    <div> 
 
     <a class='bt inactive'>Enter</a> 
 
    </div> 
 
</form>