blur() vs. onblur()
Solution 1
This:
document.getElementById('myField').onblur();
works because your element (the <input>
) has an attribute called "onblur" whose value is a function. Thus, you can call it. You're not telling the browser to simulate the actual "blur" event, however; there's no event object created, for example.
Elements do not have a "blur" attribute (or "method" or whatever), so that's why the first thing doesn't work.
Solution 2
Contrary to what pointy says, the blur()
method does exist and is a part of the w3c standard. The following exaple will work in every modern browser (including 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>
Note that I used link.onmouseover
instead of link.onclick
, because otherwise the click itself would have removed the focus.
Solution 3
I guess it's just because the onblur event is called as a result of the input losing focus, there isn't a blur action associated with an input, like there is a click action associated with a button
Related videos on Youtube
DA.
Updated on July 09, 2022Comments
-
DA. almost 2 years
I have a input tag with an onblur event listener:
<input id="myField" type="input" onblur="doSomething(this)" />
Via JavaScript, I want to trigger the blur event on this input so that it, in turn, calls the
doSomething
function.My initial thought is to call blur:
document.getElementById('myField').blur()
But that doesn't work (though no error).
This does:
document.getElementById('myField').onblur()
Why is that?
.click()
will call the click event attached to an element via the onclick listener. Why doesblur()
not work the same way?-
Ray over 13 yearsI think blur() is jQuery and onBlur() is Javascript.
-
Pointy over 13 years@Ray no, that's not really accurate, though it is true that jQuery provides a "blur" method to trigger an event (or register a handler). That method is supplied by jQuery objects, however, and is not available on plain DOM elements.
-
user1451111 over 5 yearsAlthough your question is answered but I am still curious what made you execute
doSomething()
function via explicitly triggeringonblur
function! Why could you not calldoSomething
directly? -
DA. over 5 years@user1451111 my memory is a little fuzzy as to what I was doing 7 years ago :)
-
-
DA. over 13 yearsBut you can call .click() to simulate a click event, correct? My mistake was assuming .blur() existed as well. Thanks for the answer!
-
user113716 over 13 years@DA:
.blur()
does exist in some browsers, but you first need to give the element focus if it doesn't have it. Try this example in Chrome. I don't know which browsers do/don't support it. -
Pointy over 13 yearsYes, because browsers do support a method on DOM elements called "click". I agree that it's just not consistent; many of these things evolved quickly back 10 or more years ago before anybody had a chance to think much about synchronization. I think that's one of the main reasons that libraries like Prototype and jQuery are so popular.
-
DA. over 13 yearsWhat I wouldn't give for this project to be using jQuery... ;) So, if I stick with the onBlur() option, how (relatively) safe is that in terms of current browser support. Any gotcha's I should be looking for?
-
Pointy over 13 yearsWell it's basically just accessing the reference to the function from the DOM element, so it's pretty safe. I think IE will not complain about that and will correctly bind
this
to the element, but you might double-check that. -
Vid L about 13 yearsI think it makes sense that there is a click() but no blur(). To blur you will need to .focus() on another element - which is possible