"Ctrl+A" and "del" button aren't working with ssn validation input field

Question

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 expected behavior to remove content does not occur. Any ideas as to why? I feel like I need to tell the regex value in the replace() method not to include "ctrl" (or command on a Mac) or "del", but I'm not sure how to implement.

jsfiddle: http://jsfiddle.net/eujzh10n/2/

<div id="u22" class="ax_text_field">
    <input id="u22_input" class="ssn" type="text" value="" data-label="ssn1" maxlength="11"/>
</div>

// 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 = '';
    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;
    this.value = newVal;   
});

hmm - when I comment out everything except for the "//format SSN" section, I experience the same behavior. Could it be something else? — Jon, Sep 22 '21 at 14:10
Yes - it's something else. It's because you replace the input with newVal, which clears out any selection the user makes. — James, Sep 22 '21 at 15:10

score 0 · Answer 1 · answered Sep 22 '21 at 15:13

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>

Thanks, James - that takes care of the "Select All" functionality. Any idea on how to get the "Delete" button to work as expected? — Jon, Sep 22 '21 at 15:18
I feel like I need to avoid the 'keydown' function if the delete key is being pressed... — Jon, Sep 22 '21 at 15:19
Delete works for me, but the cursor jumps if you try to delete some digits half-way through a number. Perhaps [this question](https://stackoverflow.com/questions/8219639/stop-cursor-from-jumping-to-end-of-input-field-in-javascript-replace) is useful. — James, Sep 22 '21 at 15:54

"Ctrl+A" and "del" button aren't working with ssn validation input field

1 Answers1

Linked