Setting focus inside textarea doesn't work

Question

I have the following code:

<div class="modal-body">
  <div class="form-group" id="checkDiv_0">
    <div class="col-md-2 control-label">
        @Translations.ReportCopy
    </div>
    <div class="col-md-10">
        <div class="col-md-1">
            <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
        </div>
        <div class="col-md-11">
            <textarea id="textarea_0" name="Copies" class="form-control textarea-resize"></textarea>
        </div>
    </div>
</div>
<div class="form-group" id="checkDiv_1">
    <div class="col-md-2 control-label">
        @Translations.ReportCopy
    </div>
    <div class="col-md-10">
        <div class="col-md-1">
            <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
        </div>
        <div class="col-md-11">
            <textarea id="textarea_1" name="Copies" class="form-control textarea-resize"></textarea>
        </div>
    </div>
</div>

I want to set focus on textare with the id textarea_1. Without the focus the user must left-click insisde the textarea and than can start writting inside it.

I tried with $('#textarea_1').focus(), but without success.

SOLUTION: I solved the problem this way:

$(document).ready(function () {
    $('#modal').on('shown.bs.modal',
    function () {
        var element = document.getElementById("textarea_0");
        element.focus();
    });
});

Where/how/when are you calling `$('#textarea_1').focus()` ? You are probably calling it to early. Haven't you read the jQuery tutorial? https://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready — Felix Kling, Oct 10 '15 at 22:34

score 2 · Answer 1 · answered Oct 10 '15 at 22:42

2

You need to wrap your jQuery code inside the .ready() function:

$(document).ready(function(){
    $("#textarea_1").focus();
});

answered Oct 10 '15 at 22:42

Andrew

1,302
13
19

Sagi · Answer 2 · 2015-10-10T22:50:01.813

1

Two examples without jQuery:

window.onload = function() { document.getElementById('textarea_1').focus(); };

or

window.addEventListener('load', function() { document.getElementById('textarea_1').focus(); }, false);

The second one allows you to assign multiple 'onload' events to single DOM element.

edited Oct 10 '15 at 22:50

answered Oct 10 '15 at 22:41

Sagi

578
1
4
13

score 1 · Answer 3 · answered Oct 10 '15 at 22:45

You do not need javascript for this question, since you can just do:

<textarea id="textarea_1" name="Copies" class="form-control textarea-resize" autofocus></textarea>

The autofocus attribute focuses the text area as default on the DOM.

You can use this page as reference: http://www.w3schools.com/tags/att_textarea_autofocus.asp

www139 · Answer 4 · 2015-10-10T22:58:18.093

The code necessary really depends on when you need to give it focus. If you need to give it focus when the page loads, you should do what @David Li suggested.

Otherwise, you can do something like this.

document.getElementById('focusButton').onclick = function(){
 document.getElementById('textarea_1').focus();
};

<div class="modal-body">
  <div class="form-group" id="checkDiv_0">
            <div class="col-md-2 control-label">
                @Translations.ReportCopy
            </div>
            <div class="col-md-10">
                <div class="col-md-1">
                    <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
                </div>
                <div class="col-md-11">
                    <textarea id="textarea_0" name="Copies" class="form-control textarea-resize"></textarea>
                </div>
            </div>
        </div>
         <div class="form-group" id="checkDiv_1">
            <div class="col-md-2 control-label">
                @Translations.ReportCopy
            </div>
            <div class="col-md-10">
                <div class="col-md-1">
                    <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
                </div>
                <div class="col-md-11">
                    <textarea id="textarea_1" name="Copies" class="form-control textarea-resize"></textarea>
                </div>
            </div>
        </div>
    <input type="button" id="focusButton" value="give element focus">

*"You must wait for the browser to finish rendering."* True, but there are better ways than using an arbitrary timeout. There are listed here: http://stackoverflow.com/q/14028959/218196 — Felix Kling, Oct 10 '15 at 22:36
You are correct. I made the jsfiddle in firefox. I tested it now in opera and it worked without all the extra code. Firefox is hit or miss. — www139, Oct 10 '15 at 22:49

Setting focus inside textarea doesn't work

4 Answers4