Auto select on input field doesn't work inside the modal

Question

I have a website created on bootstrap. What I'm trying to do is I want to auto-select the input field inside the modal.

SCRIPT

function click_qty_edit(){ $('#modal_edit_qty_2').modal('show'); /* I have tried this on JavaScript but nothings work :( */ var input_auto = document.getElementById('edit_2_qty'); input_auto.focus(); input_auto.select(); /* Then, I've tried also on jQuery and nothing happens again :( */ $('#edit_2_qty').focus().select(); }

HTML MODAL

 <div id="modal_edit_qty_2" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true"> <div class="modal-dialog modal-lg" style="width:350px;"> <div class="modal-content"> <div class="modal-header"> <div> <span class="text-primary">Enter New Quantity</span> </div> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="outline:none;"> × </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <input type="number" id="edit_2_qty" style="width:100%;text-align:center;border:1px #9124A3 solid;padding:10px;border-radius:8px;"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="save_edit_qty_2()">Save</button> </div> </div> </div> </div>

Can anyone explain to me what was the possible problem with this function? or is there any way to do this? Thanks in advance :)

Abhishek P · Accepted Answer · 2020-05-05 05:52:20Z

You can add a trigger such that when the modal is shown the cursor is active on the input field

$(document).ready(function(){ $('#modal_edit_qty_2').modal('show'); }); $('#modal_edit_qty_2').on('shown.bs.modal', function () { $('#edit_2_qty').focus(); }); function click_qty_edit() { $('#modal_edit_qty_2').modal('show'); document.getElementById(edit_2_qty).autofocus; /* I have tried this on JavaScript but nothings work :( */ var input_auto = document.getElementById('edit_2_qty'); input_auto.focus(); input_auto.select(); /* Then, I've tried also on jQuery and nothing happens again :( */ $('#edit_2_qty').focus().select(); }

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <div id="modal_edit_qty_2" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true"> <div class="modal-dialog modal-lg" style="width:350px;"> <div class="modal-content"> <div class="modal-header"> <div> <span class="text-primary">Enter New Quantity</span> </div> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="outline:none;"> × </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <input type="number" id="edit_2_qty" style="width:100%;text-align:center;border:1px #9124A3 solid;padding:10px;border-radius:8px;"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="save_edit_qty_2()">Save</button> </div> </div> </div> </div>

Collectives™ on Stack Overflow

Auto select on input field doesn't work inside the modal

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related