userlkjsflkdsvm userlkjsflkdsvm - 27 days ago 8
Javascript Question

When pasteing value into input area, can't capture value

I have a button and an input area. When the input's length is filled (14) - then the button's class will be active. That currently works, however, when the user pastes a value into the input area, the length is zero until the user enters something else. My goal is to display the active class on the button when the paste is done if the length of the value is 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>


UPDATE: I guess the real issue is, when pasteing I would like the value to be 14. For instance if I copy this number - 1234567891 and paste it into the input area, I get a return of 10 - well obviously because that's the length. However I would like for the result to include the masking characters - "()- ". Not sure how to go about that. Thanks.

Answer

You should use the input event. This event is triggered when eve the input changes. keyup and keydown will fire even if the input hasn't changed. Pressing CTRL will trigger keydown even if nothing has changed. input will only be triggered if it has changed, ie: CTRL + V (paste)

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

Comments