How to set focus on input in modal?

Question

I'm trying to set focus on an input after the modal shows.

The solutions and links I've seen and tried so far: How to focus on a form input text field on page load using jQuery?, Jquery Focus on input field, and none of them works.

My code is actually pretty simple:

$input = $("#letter-change-text").find("input[type='text']");
$input.val($.trim("I am just testing!!"));
$("#letter-change-text").modal('show');
$input.focus(); // this should focus the textbox in order to allow immediately input by the user

You can check this issue in JSfiddle.

I also have tried without any success:

setTimeout(function(){
   $input.focus();
}, 0);

i think you have to wait until the animation finishes to focus the input. try increasing the wait time in the `setTimeout` — Rusty Fausak, Sep 24 '14 at 16:03
try getting the input after you show the modal - jqueryui might duplicate the elements. — Daniel A. White, Sep 24 '14 at 16:05

score 2 · Accepted Answer · answered Sep 24 '14 at 16:05

2

Use the shown event

$(function(){
    $input = $("#letter-change-text").find("input[type='text']");
    $input.val($.trim("I am just testing!!"));
    $('#letter-change-text').on('shown.bs.modal', function (e) {
       $input.focus();
    }).modal('show');
});

answered Sep 24 '14 at 16:05

epascarello

204,599
20
195
236

Well, I've just edited my post to that solution..but I will edit again and accept your answer. – Linesofcode Sep 24 '14 at 16:06
1

Why do you edit a post to have the solution, that is what the answers are for.... – epascarello Sep 24 '14 at 16:07
can you explain what is 'shown.bs.modal' on 4th line? – Amit kumar Feb 28 '22 at 09:00
1

@Amitkumar Read the bootstrap documentation. They fire events – epascarello Feb 28 '22 at 13:13

score 0 · Answer 2 · edited Mar 26 '18 at 12:53

0

You can just try

$("#dgRejectSalvage").on('shown.bs.modal', function () {
    $(this).find('#RejectionReason').focus();
});

edited Mar 26 '18 at 12:53

Josh Mein

28,107
15
76
87

answered Mar 26 '18 at 12:51

Akhilesh Tripathi

43
4

How to set focus on input in modal?

2 Answers2

Linked