Question

I’ve been trying to auto-focus on an input field called #to after someone clicks on my “share” button.

Currently, everything works fine with the share. (i.e. user clicks “Share”, modal box pops up, they click anywhere OUTSIDE of the box, and it closes. All great there).

The problem is when I add the focus() function to the box, it works fine and focuses in the correct input field, but when I click anywhere outside of the box to close it, the “Share” button toggles away (and becomes hidden).

This is the input focus toggle (someone on here suggested to use toggle)

                $(".share-this").toggle("fast", function() {
              $("#to").focus();
            });

This is my entire code

            // this is for the share
    $(document).ready(function() {

        // user clicks on report this button
       $(".share-this").click(function() {

            $(".share-this").toggle("fast", function() {
              $("#to").focus();
            });

        // confirmation fades in
        $(".share-box").fadeIn("fast"),
                // Prevent events from getting pass .share-box
                $(".share-box").click(function(e){
                  e.stopPropagation();
                });

             return false;
       });

                $("body").click(function(){
                    // hide the share-box if clicked anywhere aside from the box itself
                  $(".share-box").fadeOut().removeClass("active");

                });

     });

I suspect it has to do with the code that closes the box after anywhere outside of the box is clicked

                    $("body").click(function(){
                    // hide the share-box if clicked anywhere aside from the box itself
                  $(".share-box").fadeOut().removeClass("active");

                });

Any idea what is wrong?

EDIT: This is what I’m talking about:

EDIT 2: This is the HTML

<li><a class="share-this">Share</a></li>

<div class="share-box">
<div class="share-arrow"></div>

<ul class="share-sites">
<li><a class="facebook">Facebook</a></li>
<li><a class="twitter">Twitter</a></li>
<li><a class="reddit">Reddit</a></li>
<li><a class="digg">Digg</a></li>
<li><a class="delicious">Delicious</a></li>
<li><a class="stumbleupon">StumbleUpon</a></li>
</ul>
<div class="sep"></div><p>

<?
echo "<form class=\"form\" autocomplete=\"off\" method=\"post\" action=\"\">";
echo "<label class=\"label-share\" id=\"lto\" for=\"email\">To</label>";
echo "<input class=\"input-short\" id=\"to\" type=\"text\" name=\"to\">";
echo "</form>";
}
?>
</div>

EDIT 3: Got it to work. Here is the updated code. Replaced the selector and the toggle function with fadeIn().

            // this is for the share
    $(document).ready(function() {

        // user clicks on report this button
       $(".share-this").click(function() {

     $(".share-box").fadeIn("fast", function() {
          $("#to").focus();
        });

        // confirmation fades in
        $(".share-box").fadeIn("fast"),
                // Prevent events from getting pass .share-box
                $(".share-box").click(function(e){
                  e.stopPropagation();
                });
             return false;
       });

                $("body").click(function(){
                    // hide the share-box if clicked anywhere aside from the box itself
                  $(".share-box").fadeOut().removeClass("active");
                });
     });

Answer 1

You’re exactly right. When you click anywhere in the body tag (the entire page) then the element with the .share-box class assigned to it will fadeOut. The code is working as intended.

Take out that bit of the code and the box won’t fade out – not sure what else you’re trying to achieve with the code though?