Question

实际上我想在打开自定义对话框的同时自动对焦文本框。这里我使用autofocus属性作为输入字段。但对我来说，它不起作用。如何在对话框中为文本字段添加自动对焦。任何人都可以帮助我吗？

＆＃13;

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

＆＃13;

Answer 1

当您使用该片段内的jquery显示对话框时，请添加以下行 -

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

<强>更新

当您尝试在几秒钟后可见的对话框中进行此操作时，您可能需要在完全可见之后执行此操作。试试这个 -

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

来自评论代码的新更新：

试试这个 -

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

然而，它是您在显示对话框后每次都需要执行的解决方案。

如何将文本框聚焦在自定义对话框中，以便光标在框内闪烁

1 个答案: