具有以下情况:http://jsfiddle.net/kzzy9/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.inputerror {
color: #B94A48;
border-color: #EE5F5B;
background-color: #FFE1E0;
}
</style>
<script type="text/javascript">//<![CDATA[
function validarcampoimporte(sender) {
var importe = sender.value;
if (!(/^d*(?:,d{0,2})?$/.test(importe))) {
$(sender).focus().select();
$(sender).addClass("inputerror");
//prevent any other event that caused the focusout until the user corrects the value
return false;
} else {
$(sender).removeClass("inputerror");
return true;
}
}
//]]>
</script>
<style type="text/css"></style></head>
<body>
<select name="ddlMes" id="ddlMes">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option selected="selected" value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
<input class="" id="name" size="15" type="text" onblur="return validarcampoimporte(this);">
<input type="submit" value="Buttonx" onclick="alert('i got clicked')">
</body>
</html>
当值不正确时,我可以调用哪个 jQuery 函数来防止/取消导致焦点输出的任何其他事件?返回假不起作用。
(例如,如果用户在已验证字段中,并在单击选择时输入"100a",则不会显示选项,或者如果他单击按钮,则不会显示警报" [取消事件])
PS:我知道有人会告诉我可用性问题、提交时的表单验证等,但这是我被强加要做的情况,所以事先感谢,但我需要专门以这种方式解决它......
您可以通过这种方式更改代码。
HTML(侦听 onkeyup 事件)
<select name="ddlMes" id="ddlMes" >
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option selected="selected" value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
<input class="" id="name" size="15" type="text" onkeyup="return validarcampoimporte(this);" />
<input type="submit" value="Buttonx" onclick="alert('i got clicked')">
JS(验证)
function validarcampoimporte(sender) {
var importe = sender.value;
if (!(/^d*(?:,d{0,2})?$/.test(importe))) {
$(sender).focus().select();
$(sender).addClass("inputerror");
$('input[type="submit"]').attr('disabled', 'disabled');
$('select').attr('disabled', 'disabled');
return false;
} else {
$(sender).removeClass("inputerror");
$('input[type="submit"]').removeAttr('disabled');
$('select').removeAttr('disabled');
return true;
}
}
看这里: http://jsfiddle.net/kzzy9/6/
与其内联附加事件,不如使用 javascript 附加它们。超时后,我正在重新聚焦"发件人"。当您在输入外部单击时发生的情况是调用模糊事件,然后聚焦另一个元素(可能通过单击事件)。
$("#name").blur(validarcampoimporte);
function validarcampoimporte(e) {
var importe = this.value;
var me = $(this);
if (!(/^d*(?:,d{0,2})?$/.test(importe))) {
setTimeout(function(){me.focus();}, 20);
$(this).addClass("inputerror");
e.preventDefault();
return false;
} else {
$(this).removeClass("inputerror");
return true;
}
}