將值粘貼到輸入區域時，無法捕獲值

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>