将焦点设置不起作用

我有以下代码：将焦点设置不起作用

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

我想将焦点设置textare用id textarea_1。如果没有焦点，用户必须左键单击textarea，然后才能开始写入。我试过$('#textarea_1').focus()，但没有成功。

SOLUTION： 我解决了这个问题是这样的：

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

来源

2015-10-10 user576914

凡/如何/当你调用'$（ '＃textarea_1'）专注（）'？你可能会提早打电话给你。你没有读过jQuery教程吗？ https://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready –

当文档加载时，您是否希望它具有焦点？ – www139

-1

当你需要给它专注于代码需要实际上取决于。如果你需要在页面加载的时候重点关注，你应该做@David Li建议的。

否则，你可以做这样的事情。

document.getElementById('focusButton').onclick = function(){ 
 
\t 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">

来源

2015-10-10 22:33:36 www139

*“您必须等待浏览器完成渲染。”*确实如此，但有更好的方法比使用任意超时。这里列出：http://stackoverflow.com/q/14028959/218196 –

你是对的。我在firefox中制作了jsfiddle。我现在在opera中测试过它，它没有使用所有额外的代码。 Firefox被击中或错过。 – www139

我重写了我的答案，它现在可以在任何浏览器中使用。 – www139

两个例子而不jQuery的：

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

或

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

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

来源

2015-10-10 22:41:57 Sagi

你需要用的.ready()函数内部jQuery代码：

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

来源

2015-10-10 22:42:45 Andrew

你并不需要JavaScript的这个问题，因为你可以这样做：

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

自动对焦属性聚焦文本区域作为默认的DOM。

您可以使用此页面作为参考： http://www.w3schools.com/tags/att_textarea_autofocus.asp

来源

2015-10-10 22:45:56

将焦点设置不起作用

回答

相关问题