Prevent Input from Losing Focus

Question

I have a web page like so:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Random Thoughts Blog - Add a New Post!</title>
        <link rel="stylesheet" type="text/css" href="Styles/main.css" />
        <link rel="stylesheet" type="text/css" href="Styles/add.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="Scripts/add.js"></script>
    </head>    
    <body>
        <div id="Wrapper">
            <header>
                <h1>Admin</h1>
                <a href="index.php"><p>Home</p></a>
            </header>
            <nav>
                <a href="admin.php">
                    <div class="Button">
                        <p>Add</p>
                    </div>
                </a>
                <a href="edit.php">
                    <div class="Button">
                        <p>Edit</p>
                    </div>
                </a>
                <a href="delete.php">
                    <div class="Button">
                        <p>Delete</p>
                    </div>
                </a>
            </nav>
            <div id="MainContent">
                <h1>Write a New Blog Post!</h1>
                <form name="NewPost" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <label for="Title">Title:</label><input id="title" name="Title" type="text" value="<?php if (isset($_POST['Title'])) { echo $_POST['Title']; } ?>"/>
                    <textarea id="textarea" name="PostBody"><?php if (isset($_POST['PostBody'])) { echo $_POST['PostBody']; } ?></textarea>
                    <label style="font-size: 12pt; width: 25px; margin: 8px 0 0 0;" for="Tags">Tags:</label><input style="float: right; width: 465px;" name="Tags" type="text" value="<?php if(isset($_POST['Tags'])) { echo $_POST['Tags']; } ?>"/>
                    <div id="Emoticons">
                        <a href="" id="Happy"><img alt="Smiley" src="Images/Happy.png" /></a>
                        <a href="" id="Sad"><img alt="Sad" src="Images/Sad.png" /></a>
                        <a href="" id="Neutral"><img alt="Neutral" src="Images/Neutral.png" /></a>
                        <a href="" id="Angry"><img alt="Angry" src="Images/Angry.png" /></a>
                        <a href="" id="Meh"><img alt="Meh" src="Images/Meh.png" /></a>
                        <a href="" id="Orly"><img alt="Orly" src="Images/Orly.png" /></a>
                        <a href="" id="Sleepy"><img alt="Sleepy" src="Images/Sleepy.png" /></a>
                    </div>
                    <input type="Submit" name="Submit" value="Post!" />
                </form>
            </div>
            <footer>
                <div id="FooterContent">
                    <a href="http://www.logicanddesign.ca/">
                        <p>Design by Jack R. Schaible</p>
                        <img src="Images/Icon.png" alt="Logo" />
                    </a>
                </div>
            </footer>
        </div>
        <?php
            if ($errors != '') {
                echo '<script type="text/javascript">';
                    echo 'alert("' . $errors . '");';
                echo '</script>';
            }
        ?>
    </body>
</html>

I was wondering if I could use javascript or jQuery or anything to make it so when someone clicks on one of the image anchor tags in the "Emoticons", the current input (whichever input the user is inputting data into at the moment) doesn't lose focus? Thanks!

Which input/image element? What is relation between the two? — Ram, Oct 30 '12 at 11:28
Sorry...just updated the question. Hope that clarifies things! — Jack, Oct 30 '12 at 11:32

score 4 · Accepted Answer · answered Oct 30 '12 at 11:43

4

This is the best way i know:

var lostFocus = function() {
    setTimeout(function(){
    var value = $('#myinput').val();
        $('#myinput').val('').focus().val(value);},0);
};

$('#myinput').blur(lostFocus);

See jsFiddle

answered Oct 30 '12 at 11:43

A. Wolff

74,033
9
94
155

score 0 · Answer 2 · answered Oct 30 '12 at 11:39

0

var currFocus;

$('input').focus(function(){currFocus=this});

$('#Emoticons a').click(function(){$(currFocus).focus();});

do you mean something like this?

answered Oct 30 '12 at 11:39

Anton

32,245
5
44
54

This seems like it would work...except for when the click function is called, "currFocus" is undefined for some reason... – Jack Oct 30 '12 at 11:50

Prevent Input from Losing Focus

2 Answers2

Linked