78273

HTML5 autofocus attribute inside modals does not working

Question:

HTML

<textarea name="remark" autofocus></textarea>

HTML5 autofocus attribute inside modals does not working

This is my model page // but i have multiple model in same page //

<div class="modal hide fade in" role="dialog" aria-labelledby="myModalLabel3" tabindex="-1" aria-hidden="true" id="" > <form class="form-horizontal" name="form" method="post" action="" style=" margin-bottom:0px"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">XXXXXXX</h4> </div> <div class="modal-body"> <div class="control-group"> <label class="control-label">YYYYY</label> <div class="controls remark"> <textarea name="YYY" autofocus></textarea> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <input type="submit" onClick="alertConfirm('Test');" class="btbtn-medium btn-primary" value="" name="" /> </div> </div> </form> </div>

I tried javascript Code also.. thanks in advance..

Answer1:

autofocus doesn't work when your input is hidden by default. You have to do this in JS :

$('#myModal').on('shown.bs.modal', function() { $(this).find('textarea[name="YYY"]').focus(); });

Answer2:

<h2>Check example with working Auto focus in Textarea</h2>

<pre class="snippet-code-html lang-html prettyprint-override"><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment" autofocus></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

Answer3:

autofocus doesn't work when your input is hidden. use shown event for focus $('#myModal').on('shown', function() { })

<pre class="snippet-code-js lang-js prettyprint-override">$(document).ready(function(){ $('#myModal').modal('show'); $('#myModal').on('shown', function() { $("#remark").focus(); }) }) <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body">

Some text in the modal.

<textarea id="remark" autofocus></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Recommend

  • Bind list with unequal columns
  • remove the html tag using javascript from html page
  • classpath property file in grails app is not being used
  • Grails unit test verify mock method called
  • Android gson deserialization into list
  • mysql what is the right syntax for this conditional update statement
  • Writing a unix daemon
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • git push origin master denied to user X where x is NOT the user in the local git config
  • jQueryUI dialog replacement for confirm?
  • CSS: How to fix overlapping divs
  • How to remove all of a jQuery UI dialog when it is closed
  • Creating a Multi-Step Modal Using Jquery
  • How can I make this modal persistent?
  • Get the number 18437736874454810627
  • How can I tell a form not to dispose a particular control when it closes?
  • WPF version of .ScaleControl?
  • Overlapping controls in Windows XP
  • xcode don't localize specific strings
  • IE7 and TinyMCE with Plone
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Swift: Switch statement fallthrough behavior
  • Play WS (2.2.1): post/put large request
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Nant, Vault & Windows Integrated Authentication
  • Read text file and split every line in MSBuild
  • Align navbar back button on right side
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Bug in WPF DataGrid
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • embed rChart in Markdown
  • How to Embed XSL into XML