php - 将焦点设置到输入框

Question

我有现有的代码:

 <form action="page.php?id=<?= $_GET['id'] ?>" method="post">
            <fieldset>
                <p id="edit_name"><label for="name">Page Name:</label><input type="text" name="name" value="<?PHP echo htmlspecialchars_decode($s->name);?>" id="name"> <input type="submit" src="../img/button_save.jpg" name="btnSubmit" value="Save" id="btnSubmit" class="submit"></p>
                <div id="show_name"<?= $_GET['edit'] ? ' style=" display: none"' : '' ?>><p><label for="name">Page Name:</label> <?PHP echo $s->name;?> &nbsp;&nbsp;<a href="?id=<?= $_GET['id'] ?>&edit_name=1" onClick="$('edit_name').show(); $('show_name').hide(); return false;"><img style="vertical-align: top;" src="../img/button_change.png" alt="Change Name"></a></p></div>
                <?
                // for non-JS browsers
                if(!$_GET['edit']) {
                    ?>
                <script type="text/javascript">
                    $('edit_name').hide();
                </script>
                    <?
                }
                ?>
            </fieldset>
        </form> 

我还想在单击更改时将焦点设置到输入框。目前它只是在点击更改时显示/隐藏。

谢谢!

Answer 1

正如其中一个答案所建议的那样，使点击处理程序不显眼。使用以下代码来聚焦文本框。

$(function(){
    $("id^=show_name a").click(function(){
        $('edit_name').show(); 
        $('show_name').hide(); 
        $("#name").focus();
        return false;
    });
});

您的 HTML/PHP 现在应该如下所示:

 <form action="page.php?id=<?= $_GET['id'] ?>" method="post">
    <fieldset>
            <p id="edit_name"><label for="name">Page Name:</label><input type="text" name="name" value="<?PHP echo htmlspecialchars_decode($s->name);?>" id="name"> <input type="submit" src="../img/button_save.jpg" name="btnSubmit" value="Save" id="btnSubmit" class="submit"></p>
            <div id="show_name"<?= $_GET['edit'] ? ' style=" display: none"' : '' ?>><p><label for="name">Page Name:</label> <?PHP echo $s->name;?> &nbsp;&nbsp;<a href="?id=<?= $_GET['id'] ?>&edit_name=1"><img style="vertical-align: top;" src="../img/button_change.png" alt="Change Name"></a></p></div>
            <?
            // for non-JS browsers
            if(!$_GET['edit']) {
                ?>
            <script type="text/javascript">
                $('edit_name').hide();
            </script>
                <?
            }
            ?>
    </fieldset>
</form>