23

我有一个带有 onblur 事件监听器的输入标签：

<input id="myField" type="input" onblur="doSomething(this)" />

通过 JavaScript，我想在此输入上触发模糊事件，以便它依次调用该doSomething函数。

我最初的想法是调用模糊：

document.getElementById('myField').blur()

但这不起作用（尽管没有错误）。

这样做：

document.getElementById('myField').onblur()

这是为什么？.click()将通过 onclick 侦听器调用附加到元素的 click 事件。为什么不blur()以同样的方式工作？

4

3 回答 3

29

这：

document.getElementById('myField').onblur();

之所以有效，是因为您的元素 ( <input>) 有一个名为“onblur”的属性，其值是一个函数。因此，您可以调用它。但是，您并没有告诉浏览器模拟实际的“模糊”事件；例如，没有创建事件对象。

元素没有“模糊”属性（或“方法”或其他），所以这就是为什么第一件事不起作用。

于 2011-03-06T19:10:40.817 回答
12

与 pointy 所说的相反，该blur()方法确实存在并且是w3c 标准的一部分。以下示例适用于所有现代浏览器（包括 IE）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Javascript test</title>
        <script type="text/javascript" language="javascript">
            window.onload = function()
            {
                var field = document.getElementById("field");
                var link = document.getElementById("link");
                var output = document.getElementById("output");

                field.onfocus = function() { output.innerHTML += "<br/>field.onfocus()"; };
                field.onblur = function() { output.innerHTML += "<br/>field.onblur()"; };
                link.onmouseover = function() { field.blur(); };
            };
        </script>
    </head>
    <body>
        <form name="MyForm">
            <input type="text" name="field" id="field" />
            <a href="javascript:void(0);" id="link">Blur field on hover</a>
            <div id="output"></div>
        </form>
    </body>
</html>

请注意，我使用link.onmouseover而不是link.onclick，因为否则单击本身会移除焦点。

于 2011-03-06T19:23:04.527 回答
2

我想这只是因为输入失去焦点而调用了 onblur 事件，没有与输入相关联的模糊操作，就像与按钮相关联的单击操作

于 2011-03-06T19:06:40.520 回答