javascript - “Ctrl+A”和“del”按钮不适用于 ssn 验证输入字段
问题描述
在这个 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;
});
解决方案
在您的 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>
推荐阅读
- regex - 如何在开头或结尾匹配没有空格且没有附加字母的特定单词?
- c++ - 在类的构造函数中初始化一个二维向量
- angular - Angular Service Worker 间歇性地为旧版本的应用程序提供服务
- c# - 解析正则表达式查询
- node.js - NodeJS 应用程序如何以 sudo 身份重新启动?
- javascript - 访问 _ from origin _ 被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有 HTTP ok 状态
- awk - 如何提取两个字符之间的字符串?
- postgresql - 带有 null 参数的 Postgres SQL 函数为简单的 case/when/else 生成 null
- opencv - 如何优化我的代码以获得更好的执行时间
- zstd - 告诉 zstdcat 只解压缩文件的前 N 个字节