CODEWITHSUNDEEP
javascriptjquery
user576914
user576914

Reputation: 199

Setting focus inside textarea doesn't work

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();
    });
});

Upvotes: 3

Views: 2858

Answers (4)

www139
www139

Reputation: 5227

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">

Upvotes: -1

Sagi
Sagi

Reputation: 578

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.

Upvotes: 1

David Li
David Li

Reputation: 1290

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

Upvotes: 1

Andrew
Andrew

Reputation: 1324

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

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

Upvotes: 2

Related Questions