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