Twitter bootstrap – Focus on textarea inside a modal on click

by

It doesn’t work because when you click the button the modal is not loaded yet. You need to hook the focus to an event, and going to the bootstrap’s modals page we see the event shown, that is fired when the modal has been made visible to the user (will wait for css transitions to complete). And that’s exactly what we want.

Try this:

$('#myModal').on('shown', function () {
    $('#textareaID').focus();
})
​

Here’s your fiddle updated: http://jsfiddle.net/5JN9A/5/

Update:

As @MrDBA notes, in Bootstrap 3 the event name is changed to shown.bs.modal. So, for Bootstrap 3 use:

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})

New fiddle for Bootstrap 3: http://jsfiddle.net/WV5e7/

More Related Contents:

  1. Rendering HTML inside textarea
  2. Make VueJS and jQuery play nice
  3. How do you get the cursor position in a textarea?
  4. Keep Bootstrap Dropdown Open When Clicked Off
  5. Limit number of lines in textarea and Display line count using jQuery
  6. Twitter Bootstrap alert message close and open again
  7. Limiting number of lines in textarea
  8. How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?
  9. Bootstrap 4 File Input
  10. Bootstrap datepicker disabling past dates without current date
  11. How to create a responsive image that also scales up in Bootstrap 3
  12. Count textarea characters
  13. Callback function after tooltip / popover is created with twitter bootstrap?
  14. How to hide Bootstrap modal with javascript?
  15. How to focus on a form input text field on page load using jQuery?
  16. Bootstrap modal: close current, open new
  17. Why does multiple modal using twitter bootstrap got error too much recursion?
  18. Is there a way to make a text area partially editable? (make only portions of the text editable)
  19. How to read line by line of a text area HTML tag
  20. Bootstrap accordion, scroll to top of active (open) accordion on click?
  21. how to bind Bootstrap-datepicker element with angularjs ng-model?
  22. focus() not working in safari or chrome
  23. How to keep the changes made to DOM by javascript/jquery on page refresh
  24. Onclick reload the div only
  25. CSS Textarea that expands as you type text [duplicate]
  26. Set cursor to specific position on specific line in a textarea
  27. script order for jquery with bootstrap
  28. Bootstrap Dropdown menu is not working
  29. Bootstrap button drop-down inside responsive table not visible because of scroll
  30. “Force Reflow” in CSS transitions in Bootstrap

Leave a Comment