Question

我有一个网站列出了几个即将举行的活动，每个活动都有一个评论按钮来发表评论。它看起来像这样（它是瑞典语，但我认为你可以弄清楚结构）：

_{（来源：shipit.se）}

包含用于撰写评论的textarea的div最初是隐藏的，当点击“评论”图标时，它会使用以下javascript显示：

<script language="javascript" type='text/javascript'>
    function showhide_comment(comment_id, change_id) {
        if (document.getElementById(comment_id).style.display == 'none') { 
            if (document.getElementById(change_id).style.display == 'block') {
                document.getElementById(change_id).style.display = 'none';
                document.getElementById(comment_id).style.display = 'block';
                document.getElementById(change_id).style.display = 'block';
            } else {
                document.getElementById(comment_id).style.display = 'block';
            }
        } else {
            if (document.getElementById(change_id).style.display == 'block') {
                document.getElementById(change_id).style.display = 'none';
                document.getElementById(comment_id).style.display = 'none';
                document.getElementById(change_id).style.display = 'block';
            } else {
                document.getElementById(comment_id).style.display = 'none';
            }
        }   
    }

该脚本包含一个hack，用于在IE中正确显示隐藏的div，此时还会显示另一个（最初隐藏的）div，其中可以对事件进行更改。但别介意。

显示评论表单的php代码如下所示：

//Comment form, initially hidden
            echo "<div id=\"comment" . $row->id . "\" class=\"submit-comment\" style=\"display: none\">";
            echo "<form name=\"make_comment\" method=\"post\" action=\"submit_comment.php\">";
            echo "Kommentar:<br/>";
            echo "<textarea name=\"comment\" class=\"comment\" rows=\"0\" cols=\"0\"></textarea><br/>";
            echo "<input type=\"hidden\" name=\"event_id\" value=\"$row->id\"/>";
            echo "<input class=\"comment\" type=\"submit\" name=\"submit_comment\" value=\"Skicka\" />";
            echo "</form>";
            echo "</div>";

此代码位于一个循环内，该循环显示存储在mySQL数据库中的所有即将发生的事件。可以看出，div被赋予变量名称，如comment1，comment2等，以便将注释绑定到正确的事件。

这是显示评论图标并将其链接到javascript的代码：

echo "<li class=\"icon-left\">
            <a href=\"javascript:showhide_comment('comment" . $row->id . "', 'change" . $row->id . "')\">
            <img src=\"images/comment-24x24.png\" title=\"Kommentera körning\" alt=\"Kommentera körning\" />
            </a></li>";

我想要做的是将焦点放在正确的textarea字段中，当单击评论图标时，该字段变为可见，以便用户可以直接开始输入。我曾尝试使用focus（）修改上面的javascript，但我无法让它工作。关于如何实现我想要的任何想法？

感谢。

/莱纳斯

Answer 1

这将把第一个textarea集中在div中，这就是你想要的：

document.getElementById(comment_id).getElementsByTagName('textarea')[0].focus();

Answer 2

在您的javascript函数中显示表单：

 if (document.getElementById(comment_id).style.display == 'none') { 
                        if (document.getElementById(change_id).style.display == 'block') {
                                document.getElementById(change_id).style.display = 'none';
                                document.getElementById(comment_id).style.display = 'block';
                                document.getElementById(change_id).style.display = 'block';
                                document.getElementById(comment_id).focus(); //This will set the focus

我猜这里comment_id将成为评论的textarea的id。如果没有，则在document.getElementById();中使用最后一行中textarea的id。

Answer 3

我建议您开始使用JQuery或Dojo Javascript框架它们将使您的生活更轻松。它使DOM操作非常简单，快速，简洁，更灵活这样你就不会在简单的事情上遇到这么多麻烦我自己经常使用Dojo。这真的很棒。

使用javascript将焦点放在具有变量名称的textarea中

3 个答案: