在textarea中設置焦點不起作用

Question

我有以下代碼：

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

我想用id textarea_1設置對textare的關注。 沒有焦點，用戶必須左鍵單擊insisde textarea而不是開始在其中寫入。

我嘗試使用$('#textarea_1').focus() ，但沒有成功。

解決方案：我用這種方式解決了問題：

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

Answer 1

您需要將jQuery代碼包裝在.ready()函數中：

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

Answer 2

沒有jQuery的兩個例子：

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

要么

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

第二個允許您將多個'onload'事件分配給單個DOM元素。

Answer 3

你不需要javascript來解決這個問題，因為你可以這樣做：

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

autofocus屬性將文本區域作為默認值集中在DOM上。

您可以使用此頁面作為參考： http ： //www.w3schools.com/tags/att_textarea_autofocus.asp

Answer 4

必要的代碼實際上取決於您何時需要關注它。 如果你需要在頁面加載時給它焦點，你應該做@David Li建議的。

否則，你可以做這樣的事情。

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