“Ctrl+A”和“del”按钮不适用于 ssn 验证输入字段

Question

在这个 jsfiddle 中，如果您尝试在输入字段中输入一些数字，则尝试“ctrl+A”并删除您输入的内容，或者尝试使用“del”（删除）按钮，预期不会发生删除内容的行为。关于为什么的任何想法？我觉得我需要告诉 replace() 方法中的正则表达式值不要包含“ctrl”（或 Mac 上的命令）或“del”，但我不确定如何实现。

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;   
});

Answer 1

在您的 keyup 处理程序中，仅当值已更改时才替换输入（使用 Ctrl-A 等不会）

// 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>