Question

在我的表单中，我有一些字段，我已应用onblur事件。问题是如果我在输入某个字段后直接点击保存，则保存不会被调用。我需要点击两次。有关更多说明，请参阅以下步骤，并附上代码段。

1）在输入框中输入一些值
2）通过标记或点击屏幕上的其他位置来丢失焦点
3）它工作正常并且函数triggerOnBlur被调用
4）现在再次在输入框中输入一些值 5）直接点击保存按钮，无需点击其他任何内容 6）函数triggerOnBlur被调用，但是为了点击保存按钮，我需要点击保存。

我希望一键完成..

 <!DOCTYPE html>
<html>
<head>
<script>
function triggerOnBlur()
{
alert("onblur event triggered");
}

function triggerSaveButton()
{
alert("save button");
}
</script>
</head>
<body>

<form>
<input type = "text" onblur = "triggerOnBlur()" />
<input type = "submit" value = "Save" onclick = "triggerSaveButton()" />
</form>
</body>
</html>

Answer 1

由于您alert()打破了click事件，click event需要您在按钮上释放鼠标键，如果您必须使用alert()，则可以使用onmousedown } event，看看这个例子

http://jsfiddle.net/3w8VM/

Answer 2

您可以随时执行以下操作：

function triggerSaveButton()
{
    var inputs = document.getElementsByTagName("input"), input = null;
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        if(input.type == "text" && input == document.activeElement) {
            input.blur();
        }
    }
    // onblur triggered, now continue with function
    alert("save button");
}

需要点击2次才能失去焦点

2 个答案: