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，因此它会在keydown和输入上触发您的函数。使用您的代码

查看此工作示例

$('#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>

Answer 2

您应该使用input事件。输入更改前夕会触发此事件。即使输入未更改，keyup和keydown也会触发。即使没有任何更改，按 CTRL 也会触发keydown。 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>

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

2 个答案: