How to simulate a click to make the current input lose its focus with JavaScript

Question

I have an input which at some points happens to have the focus. If the user click in the "background" of the page, the input loses its focus. I was trying to simulate the click on the background with the following code, but this doesn't work (you will notice that the input still has the focus). Any suggestion on how to write code that simulates a click on the "background" of the page?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" ></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js" ></script>
        <script type="text/javascript">
            YAHOO.util.Event.onDOMReady(function() {
                document.getElementById("input").focus();    
                document.getElementById("main").focus();    
            });
        </script>
    </head>
    <body>
        <div id="main">
            <form action="/">
                <p>
                    <input type="text" id="input"/>
                </p>
            </form>
        </div>
    </body>
</html>

score 20 · Accepted Answer · answered Oct 21 '08 at 01:29

20

I would imagine using blur() would do the trick:

<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function() {
        document.getElementById("input").focus();    
        document.getElementById("input").blur();    
    });
</script>

answered Oct 21 '08 at 01:29

Paolo Bergantino

480,997
81
517
436

Great stuff, thanks Paolo. I should have thought about it :). – avernet Oct 22 '08 at 23:04

score 2 · Answer 2 · answered Oct 21 '08 at 01:30

2

Try using the blur event. If you're using jQuery there is a method you can call on the DOM object to raise this event. The blur() method should also work without jQuery.

http://docs.jquery.com/Events/blur

answered Oct 21 '08 at 01:30

Dan Herbert

99,428
48
189
219

oops, I didn't notice his script references. The blur() method will work regardless of framework though. – Dan Herbert Oct 21 '08 at 01:43

score 0 · Answer 3 · answered Nov 20 '20 at 07:37

Your idea is right, but there is a little problem.

document.getElementById("main").focus();

<div id="main">

as shown in your code, actually the div HTMLElement doesn't have a focus method.

so you can call other elements that have a focus method or call blur() on the input element

How to simulate a click to make the current input lose its focus with JavaScript

3 Answers3