web-dev-qa-db-fra.com

flou () vs onblur ()

J'ai une balise d'entrée avec un écouteur d'événement onblur:

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

Via JavaScript, je veux déclencher l'événement de flou sur cette entrée afin qu'il appelle à son tour la fonction doSomething.

Ma pensée initiale est d'appeler flou:

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

Mais cela ne fonctionne pas (mais pas d'erreur).

Cela fait:

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

Pourquoi donc? .click() appellera l'événement click attaché à un élément via l'écouteur onclick. Pourquoi blur() ne fonctionne-t-il pas de la même manière?

javascriptjqueryonblur
22
DA.

Cette:

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

fonctionne parce que votre élément (le <input>) a un attribut appelé "onblur" dont la valeur est une fonction. Ainsi, vous pouvez l'appeler. Vous pas dites au navigateur de simuler l'événement "flou" réel, cependant; par exemple, aucun objet événement n'est créé.

Les éléments n'ont pas d'attribut "flou" (ou "méthode" ou autre), c'est pourquoi la première chose ne fonctionne pas.

28
Pointy

Contrairement à ce que dit pointu, la méthode blur() existe et fait partie de la norme w3c . L'exemple suivant fonctionnera dans tous les navigateurs modernes (y compris 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>

Notez que j'ai utilisé link.onmouseover au lieu de link.onclick, car sinon le clic lui-même aurait supprimé le focus.

11
Elian Ebbing

Je suppose que c'est juste parce que l'événement onblur est appelé en conséquence de l'entrée perdant le focus, il n'y a pas d'action flo associée à une entrée, comme il y a un - clic action associée à un bouton

2
cusimar9