Applying changes to text on pasting into input instead of key down entery

Question

I am trying to append - between phone numbers in user input to be like xxx-xxx-xxxx instead of xxxxxxxxxx .

This is working fine when using Keys to enter value but what about Pasting the number or Chrome Auto-fill function? For example if you copy and paste 2222222222 to the input the - will not added between.

How can I fix this?

 $(function () {

            $('#txtnumber').keydown(function (e) {
             var key = e.charCode || e.keyCode || 0;
             $text = $(this); 
             if (key !== 8 && key !== 9) {
                 if ($text.val().length === 3) {
                     $text.val($text.val() + '-');
                 }
                 if ($text.val().length === 7) {
                     $text.val($text.val() + '-');
                 }
             }

             return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
         })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <input id="txtnumber"   type="text" maxlength="12" placeholder="xxx-xxx-xxxx" /><br /><br />

Salim · Answer 1 · 2019-09-04T23:54:02.613

Original answer (look at the update) [interesting]

Add a change event listener to the input, because keydown is not emmitted when pasting

Something like this should work

$('#txtnumber').change(function(e) {
     var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
    e.target.value = x[1] + '-' + x[2] + '-' + x[3];
});

Update

Working always on vuejs. Change is the thing. Apparently not for purejs and in google chrome (i will test for other browser later)

For some reason, the change event only fires when the input field loses focus. Binding to other options ('change keypress paste focus textInput input') will fire the event several times, which is bad.

The below code works even when content is pasted into the text field, and only fires once as expected.

input event come to the rescue (or simple it's our event) (change however is confusing).

$('#txtnumber').bind('input', function(e) {
    console.log('This actually fires');
    console.log(e.target.value);
});

And a pure js

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

Final Example

$('#txtnumber').bind('input', function(e) {
    if (e.target.value.length === 10) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
        e.target.value = x[1] + '-' + x[2] + '-' + x[3];
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="txtnumber" type="text" maxlength="12" placeholder="xxx-xxx-xxxx" /><br /><br />

score 0 · Answer 2 · answered Sep 04 '19 at 23:05

you need to capture the Ctrl key + V, and then insert your -'s

var ctrlDown = false,
    ctrlKey = 17,
    cmdKey = 91,
    vKey = 86,
    cKey = 67;

$(document).keydown(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
}).keyup(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
});

/// your code + 
$(function () {

        $('#txtnumber').keydown(function (e) {
         var key = e.charCode || e.keyCode || 0;
         if (ctrlDown && (e.keyCode == vKey)){
                //insert the -'s on respective possition
         }
         else{
          $text = $(this); 
          if (key !== 8 && key !== 9) {
             if ($text.val().length === 3) {
                 $text.val($text.val() + '-');
             }
             if ($text.val().length === 7) {
                 $text.val($text.val() + '-');
             }
         }
         }

credits to> https://stackoverflow.com/a/2904944/335905

Applying changes to text on pasting into input instead of key down entery

2 Answers2

Original answer (look at the update) [interesting]

Update

Final Example