组合组件上的onBlur事件(输入+按钮)

onBlur event on composed component (input + Button)

本文关键字：输入 按钮 事件 组件 onBlur 组合      更新时间：2023-09-26

我试图使一个由输入字段和按钮组成的"组成组件"。

我有以下jsfiddle作为示例:

http://jsfiddle.net/stt0waj0/

<div id="myComponent">
    <input type="text" onBlur="this.style.border='1px solid red';">
    <button type="button" onClick="alert('Hello World');">ClickMe</button>
</div>

我想要的行为是，当我离开输入字段而不写任何内容时，我得到一个验证错误(在本例中是红色边框)。这已经在现场工作了(内容验证不是问题的范围)。

但是，当我按下按钮离开输入字段时，我将打开一个允许为输入字段选择值的对话框，所以在这种情况下，我不希望运行验证。

那么，关于小提琴的具体问题是:我可以点击输入字段，然后点击按钮而没有红色边框吗?但是，如果我点击输入框，然后点击其他地方，我想要红色的边框(任何onBlur，当按钮被点击时除外)。

这可能没有肮脏的把戏吗?

我想避免的事情:

  • 在第一个事件上设置定时器，等待第二个事件(原因:性能)
  • 使onClick事件总是重置文本字段的红色边框(原因:gui故障)

只是为了弄清楚我在寻找什么，为什么这个问题很有趣:onBlur事件在onClick事件之前被触发。然而，我通常需要onBlur知道onClick接下来，这是不可能的。这就是问题的关键。

想象一个日期选择器在空字段上进行验证，当字段有焦点并且您按下日历时，即使您选择了日期，也会得到验证错误。我想知道是否有一种优雅的方法来处理这种情况

要做到这一点，如果用户按下按钮，您可以推迟验证函数。

下面是示例代码和小提琴，以显示我的意思。*更新小提琴使用选择下拉而不是一个按钮*小提琴演示

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() {
});
相关文章：