我正在尝试制作一个由输入字段和按钮组成的“组合组件”。
我有以下 jsfiddle 作为示例:
<div id="myComponent">
<input type="text" onBlur="this.style.border='1px solid red';">
<button type="button" onClick="alert('Hello World');">ClickMe</button>
</div>
我想要的行为是,当我离开输入字段而不写入任何内容时,我会收到验证错误(在本例中为红色边框)。这已经在 fiddle 中起作用了(内容验证不是问题的范围)。
但是,当我按下按钮离开输入字段时,我将打开一个对话框,允许为输入字段选择值,因此在这种情况下,我不希望运行验证。
所以,关于 fiddle 的具体问题:我可以单击输入字段,然后单击按钮并且没有红色边框吗?但是,如果我单击输入字段,然后单击其他位置,我想要红色边框(单击按钮时除外的任何 onBlur)。
如果没有肮脏的伎俩,这可能吗?
我想避免的事情:
- 在第一个事件上设置计时器以等待第二个事件(原因:性能)
- 使 onClick 事件始终重置文本字段上的红色边框(原因:gui 故障)
只是为了弄清楚我在寻找什么以及为什么这个问题很有趣: onBlur 事件在 onClick 事件之前触发。但是,我通常需要 onBlur 才能知道接下来是 onClick,这是不可能的。这就是问题的重点。
想象一个在空字段上进行验证的日期选择器,当该字段具有焦点并且您按下日历时,即使您选择了一个日期,您也会收到验证错误。我想知道是否有一种优雅的方法来处理此类情况。
最佳答案
为了实现此目的,如果用户按下按钮,您可以推迟验证功能。
下面是示例代码和 fiddle 来展示我的意思。 *更新了 fiddle 以使用选择下拉菜单而不是按钮* Fiddle Demo
input.error {color: red; border: 1px solid red;}
<div id="myComponent">
<input id="btn" type="text" onBlur="inputBlur()">
<select type="button" data-btn="btn" onclick="inputButtonClick()" onchange="selectChange()" onblur="selectBlur()">
<option value="">choose</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
</div>
window.validate = function(input) {
//do your validation
var val;
console.log("Validating");
val = input.val();
if ( !val || !val.length) {
input.addClass("error");
console.log("Something is invalid");
} else {
//all good
console.log("All valid");
}
//clear error after x time to retry
setTimeout(function() {
$(".error").removeClass("error");
$("input").removeAttr("data-btn-active") ;
}, 3000);
}
window.selectBlur = function() {
var input = $("#" + $(event.target).attr("data-btn"));
validate(input);
}
window.selectChange = function() {
var input = $("#" + $(event.target).attr("data-btn"));
console.log("change", $(event.target).val() );
input.val( $(event.target).val() );
validate(input);
}
window.inputButtonClick = function() {
var input = $("#" + $(event.target).attr("data-btn"));
input.attr("data-btn-active", "true");
console.log("inputButtonClick",input );
}
window.inputBlur = function() {
var input = $(event.target);
//give a bit of time for user to click on the button
setTimeout(function() {
if (!input.attr("data-btn-active" ) ) {validate(input);}
}, 100);
}
$(document).ready(function() {
});
关于javascript - 组合组件上的 onBlur 事件(输入 + 按钮),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30484187/