如何將文本框對焦到自定義對話框中，以便光標在框內閃爍

實際上，這裏我想在打開自定義對話框時自動對焦文本框。這裏我使用輸入欄的自動對焦屬性。但對我而言，它不起作用。如何在對話框中爲文本框添加自動對焦。誰能幫我？如何將文本框對焦到自定義對話框中，以便光標在框內閃爍

<ul> 
 
    <li title="Create New"><a data-open="modalCreateNew" class="align-middle"><img src="../views/images/home/create_new_normal.png" /><span>Create New</span></a></li> 
 
</ul> 
 
<div class="reveal" id="modalCreateNew" data-reveal data-close-on-click="false" data-close-on-esc="false" data-animation-in="slide-in-right" data-animation-out="slide-out-right"> 
 
    <div class="expanded row header"> 
 
     <div class="columns modalHeaderContent"> 
 
     <img src=" 
 
     <c:out value="views/images/home/create_new_icon.png"/> 
 
     "><span>Create New</span> 
 
     </div> 
 
     <div data-close class="modalHeaderContent" style="padding-top: 8px;padding-right: 8px;" onClick="$('#diagramName').val('');document.getElementById('error-message').innerHTML = '';"> 
 
     <%-- <img src="<c:url value="/views/images/common/close_hover.png"/>"> --%> 
 
     <button class="btn-close" data-action="close">x</button> 
 
     </div> 
 
    </div> 
 
    <div class="row modalBody columns" id="modal"> 
 
     <div class="collapse row modal-new-title"> 
 
     <div class="columns">Enter the diagram name</div> 
 
     </div> 
 
     <div class="row margin-zero new-file-row" style="margin-top: 0px;"> 
 
     <div class="error-msg-container small-12 medium-12 large-12"> 
 
      <label id="error-message"></label> 
 
     </div> 
 
     <div class="small-5 medium-4 large-3 columns text-right new-file-text align-self-middle hide-overflow">Diagram Name:</div> 
 
     <div class="small-7 medium-8 large-9 columns new-file-control"> 
 
      <input id="diagramName" type="text" autofocus="autofocus" /> 
 
     </div> 
 
     </div> 
 
     <div class="row margin-zero choose-diagram-row"> 
 
     <div class="small-5 medium-4 large-3 columns text-right choose-diagram-text align-self-middle hide-overflow">Choose Diagram:</div> 
 
     <div class="small-7 medium-6 large-5 columns choose-diagram-control"> 
 
      <select id="diagramType"> 
 
       <option value="VSM">VSM</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row modalFooter align-middle align-center"> 
 
     <div class="small-5 medium-4 large-3 columns text-center" style="max-width: 20%; padding: 0px;"> 
 
     <c:url var="createDiagramURL" value="editor/diagram" /> 
 
     <!-- <input type="button" class="button margin-zero create-new-dialog-btn" value="Create" onclick="validateFileName($('#diagramName').val())" /> --> 
 
     <input type="button" class="button margin-zero create-new-dialog-btn" value="Create" onclick="createDiagram('<c:out value="${createDiagramURL}"')"> 
 
     </div> 
 
     <div class="small-5 medium-4 large-3 columns text-center" style="padding-left: 0px;"> 
 
     <input type="button" data-close class="button margin-zero create-new-dialog-btn" onClick="$('#diagramName').val(''); document.getElementById('error-message').innerHTML = '';" value="Cancel"> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-01 Ravi Kumar

顯示腳本，打開你的模態請 –

你的錯誤是什麼？ –

'trigger（'blur'）'也許 – madalinivascu

當顯示對話框使用jQuery該片段裏面添加這個LINE-

$('#diagramName').focus();

更新：

而當你試圖去做在幾秒鐘之後就可以看到的對話框中，所以您可能需要在獲取後執行此操作它完全可見。從評論的代碼試試這個單

setTimeout(function() { 
    $('#diagramName').focus(); 
}, 3000);

新的更新：

嘗試像這個 -

createNew() { 
    $('#modalCreateNew').draggable({ 
     revert: true, 
    }); 
    setTimeout(function() { 
     $('#diagramName').focus(); 
    }, 3000); 
}

然而它，你只需要在每次顯示後執行解決方案對話框。

來源

2017-03-01 10:36:41

感謝您的答案，我試過這一個，但對我來說它不工作 –

嘗試更新的代碼... –

非常感謝它的工作..但第一次它的工作罰款..當我關閉對話框，並再次當我第二次打開自動對焦不顯示。 –

如何將文本框對焦到自定義對話框中，以便光標在框內閃爍

回答

相關問題