使用javascript将焦点放在具有变量名的文本区域内答案

【问题标题】：Put focus inside a textarea with variable name using javascript使用javascript将焦点放在具有变量名的文本区域内
【发布时间】：2009-05-09 09:19:20
【问题描述】：

我有一个网站，列出了几个即将发生的事件，每个事件都有一个评论按钮来离开 cmets。它看起来像这样（它是瑞典语，但我认为您可以弄清楚结构）：

_{（来源：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';
            }
        }   
    }

脚本包含一个技巧，可以在 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 等，以便将 cmets 绑定到正确的事件。

这是显示注释图标并将其链接到 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，但我无法让它工作。关于如何实现我想要的任何想法？

谢谢。

/林纳斯

【问题讨论】：

标签： php javascript html

【解决方案1】：

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

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

【讨论】：

【解决方案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 将是用于评论的文本区域的 ID。如果没有，在document.getElementById(); 中使用了最后一行的textarea 的id。

【讨论】：

我已经尝试过了，但不幸的是它不起作用。如果有帮助，我正在使用 firefox v3.0.9 进行测试。
很可能是 textarea 的 id 错误。你有安装萤火虫吗？安装它，然后右键单击 textarea 并单击“检查元素”以查看 id 是否是您所期望的

【解决方案3】：

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

【讨论】：