我有一个基本形式,因此用户不能在表单发布页面之前将输入字段留空。它还可以防止用户输入乱码并要求他们只输入数字,但这也会阻止所有不是数字的键,包括移动键盘上的 Go / Enter 。我的问题是,有没有办法让用户只输入数字,但也可以在进入字段后按 Go ?
FIDDLE:http://jsfiddle.net/schermerb/nX8Hx/
目前,用户必须先输入一个拉链,然后点击屏幕,然后点击提交。
$(document).ready(function () {
$("#quantity").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
$("#errmsg").html("Enter Valid Zip!").show().fadeOut("5000");
return false;
}
});
});
var initVal = "Have a good name for it? Enter Here";
$(document).ready(function () {
$(".submit-name").attr("disabled", "true");
$(".recipe-name").blur(function () {
if ($(this).val() != initVal && $(this).val() != "") {
$(".submit-name").removeAttr("disabled");
} else {
$(".submit-name").attr("disabled", "true");
}
});
});
input {
width: 100%;
background: #FFFFFF;
border-radius: 4px;
border: 2px solid #acd50b;
padding: 10px 15px;
text-align: center;
-webkit-appearance: none;
color: #999999;
font-size: 11px;
}
input[type="focus"] {
outline: none;
}
input[type="submit"] {
border-radius: 4px;
border: 2px solid #2d8b1b;
-webkit-appearance: none;
background: #acd50b;
padding: 6px 10px;
color: #444444;
width: 100%;
font-size: 18px;
cursor:pointer;
}
.box {
width: 85px;
}
.boxtwo {
width: 160px;
}
<form action="google.html" method="get" id="recipename">
<div class="box">
<input onFocus="this.value=''" type="text" value="Enter Your Zip" placeholder="Enter Your Zip" /><span id="errmsg"></span>
</div>
<div class="boxtwo">
<input type="submit" value="Compare" id="register" disabled value="Compare" class="submit-name" />
</div>
</form>
答案 0 :(得分:1)
最好使用keydown并测试结果值并将其还原,而不是仅允许插入某些字符。
$("#quantity").keydown(function (e) {
var self = this;
var tempVal = this.value;
setTimeout(function () {
if (!isValidZip(self.value)) {
self.value = tempVal;
}
}, 0);
});
function isValidZip(zip) {
return /^[0-9]{1,5}$/.test(zip);
}
这也可以通过keyup或keypress完成,但是keydown可以更快地实现,并且可以让您轻松获得之前的值。
这样做可以避免因未测试按下哪个键而阻止完成键的问题。只需更改正则表达式以匹配不同类型的邮政编码,它也可轻松扩展。