"Ctrl+A" And "del" Button Aren't Working With Ssn Validation Input Field

In this jsfiddle, if you try to input some numbers in the input field, then try to either 'ctrl+A' and delete what you have input, OR try to use the 'del' (delete) button, the expe

Solution 1:

In your keyup handler, only replace the input if the value has changed (which it doesn't with Ctrl-A, etc)

// SSN validation
// trap keypress - only allow numbers
$('input.ssn').on('keypress', function(event){
    // trap keypress
    var character = String.fromCharCode(event.which);
    if(!isInteger(character)){
        return false;
    }    
});

// checks that an input string is an integer, with an optional +/- sign character
function isInteger (s) {
    if(s === '-') return true;
   var isInteger_re     = /^\s*(\+|-)?\d+\s*$/;
   return String(s).search (isInteger_re) != -1
}

// format SSN 
$('input.ssn').on('keyup', function(){
   var val = this.value.replace(/\D/g, '');
   var newVal = '';
   // I'm not sure what this is for, but it updates the field perhaps unnecessarily
//    if(val.length > 4) {
//        this.value = val;
//    }
    if((val.length > 3) && (val.length < 6)) {
        newVal += val.substr(0, 3) + '-';
        val = val.substr(3);
    }
    if (val.length > 5) {
        newVal += val.substr(0, 3) + '-';
        newVal += val.substr(3, 2) + '-';
        val = val.substr(5);
    }
    newVal += val;
    if (this.value != newVal) { // only update the field if its content has changed
        this.value = newVal;   
    }
});

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.error-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.error-border:focus { 
    outline: none;
    border-color: #F00;
    box-shadow: 0 0 10px #F00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="u22" class="ax_text_field">
    <input id="u22_input" class="ssn" type="text" value="" data-label="ssn1" maxlength="11"/>
</div>