在文本区域内设置焦点不起作用

Setting focus inside textarea doesn't work

本文关键字：焦点 不起作用 设置 文本 区域      更新时间：2023-09-26

我有以下代码:

<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的文本上。如果没有焦点，用户必须在文本区域内左键单击，然后才能在里面开始书写。

我尝试用$('#textarea_1').focus()，但没有成功。

解决方案:我用这种方法解决了这个问题:

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

你需要在.ready()函数中包装你的jQuery代码:

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

你不需要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

两个不使用jQuery的例子:

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

或

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

第二个允许您为单个DOM元素分配多个'onload'事件。

所需的代码实际上取决于您何时需要关注它。如果你需要在页面加载时给予它焦点，你应该按照@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">

相关文章：