將焦點設置不起作用

我有以下代碼：將焦點設置不起作用

<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

將焦點設置不起作用

回答

相關問題