php - 使用javascript将焦点放在具有变量名称的文本区域内

Question

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

_{(来源:shipit.se)}

包含用于编写评论的文本区域的 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，当另一个(最初隐藏的)div 也显示时，可以在 IE 中正确显示隐藏的 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 等，以便将评论绑定(bind)到正确的事件。

这是显示评论图标并将其链接到 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

这将聚焦 div 中的第一个文本区域，这就是您想要的:

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