Поместите фокус внутри текстовой области с именем переменной, используя 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';
            }
        }   
    }

Скрипт содержит хак для корректного отображения скрытого 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 и т. Д., Чтобы связать комментарии с правильным событием.

Это код для отображения значка комментария и связывания его с 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>";

То, что я хотел бы сделать, это поместить фокус в правильное поле текстовой области, которое становится видимым при нажатии на значок комментария, чтобы пользователь мог начать печатать напрямую. Я попытался изменить JavaScript выше с помощью focus (), но я просто не могу заставить его работать. Любые идеи о том, как я могу добиться того, что я хочу?

Спасибо.

/ Linus

Answer 1

Это будет фокусировать первую текстовую область в div, что вам нужно:

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

Answer 2

Я рекомендую вам начать использовать JQuery или Dojo Javascript Framework.
Они сделают вашу жизнь намного проще. Это делает манипулирование DOM очень простым, быстрым, менее многословным и даже более гибким.
Таким образом, у вас не будет особых проблем с простыми вещами.
Я сам много пользуюсь додзе. Это действительно здорово.

Answer 3

В вашей функции 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 будет идентификатором для текстовой области для комментария. Если нет, в document.getElementById(); используется идентификатор текстовой области в последней строке.