Nevermind.
HTML form fields offer a focus() method but do not offer a blur() method. I'm not sure why this is. jQuery offers a .blur() function but it's used for capturing the blur event; it doesn't work on all browsers (like Chrome, for example) for actually invoking the blur action.
But my solution is rather simple.
$.blur = function(el) {
var b = $('<input type="button" style="width: 0px; height: 0px; position:absolute; z-index: -9999;" />');
if (el) $(el).parent().prepend(b);
else $(document.body).prepend(b);
b.focus().remove();
};All this is doing is dropping in a hidden button, focusing on it, and then dropping it. Assuming the browser has no memory leaks, the net effect is simply a focal blur with no new elements.
<html>
<head>
<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$.blur = function(el) {
var b = $('<input type="button" style="width: 0px; height: 0px; position:absolute; z-index: -9999;" />');
if (el) $(el).parent().prepend(b);
else $(document.body).append(b);
b.focus().remove();
};
</script>
<input />
<div style="background-color: #e0dac0; display: inline;"
onmouseover="$.blur(this)">hover to blur</div>
</body>
</html>Tested on current versions of IE, Chrome, Firefox, Opera, and Safari.
Subscribe