Ravi Kumar Ravi Kumar -4 years ago 99
jQuery Question

how show the cursor pointer in textbox in a Dialog

Actually here I want auto focus on the textbox while I'm opening the dialog box..

Here I used auto focus for the input field but for me its not working.

how to add auto focus for the text field in a dialog box?



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





Anyone can help me.

Answer Source

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

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

Update:

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() { 
    $('#diagramName').focus();
}, 3000);

New update from code from comment:

Try like this-

createNew() {
    $('#modalCreateNew').draggable({
      revert: true,
    });
    setTimeout(function() {
        $('#diagramName').focus();
    }, 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