Ravi Kumar Ravi Kumar -4 years ago 94
Javascript Question

How to focus a textbox in a custom dialog, so that the cursor blinks inside the box

Actually here i want to autofocus a textbox while I'am opening a custom dialog box. Here I used autofocus attribute for the input field. But for me it's not working. How to add autofocus for the textfield in a dialog box. Can anyone help me?

<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>
<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 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 class="row modalBody columns" id="modal">
<div class="collapse row modal-new-title">
<div class="columns">Enter the diagram name</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 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 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>
<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 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">

Answer Source

When you show the dialog using jquery inside that snippet add this line-



And as you are trying to do it in a dialog which is getting visible after few seconds, so you may need to do it, after getting it fully visible. Try this one-

setTimeout(function() { 
}, 3000);

New update from code from comment:

Try like this-

createNew() {
      revert: true,
    setTimeout(function() {
    }, 3000);

However it's the solution which you just need to execute each time after showing the dialog.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download