Focusing on last textfield in twitter bootstrap modal form when pressing tab

I observed that in  Twitter bootstrap modal form, tab key was not focusing on the last element when the focus in  on second last element and tab key is pressed.

Found this workaround to resolve

 $('#billingInfo').keydown(function(e){
  if($('#buyerPincode').is(":focus") && (e.which || e.keyCode) == 9){
    e.preventDefault();
    $('#buyerPhoneNumber').focus();
  }

#billingInfo -> ID of the twitter bootstrap modal form

#buyerPincode-> ID of second last element

#buyerPhoneNumber->ID of last element in the form.

keyCode=>9 is the keycode for tab key

Focusing on the textbox and setting the cursor at the end of the prepopulated text

Here's a simple way to focus the textbox and set the cursor at the end of prepopulated text box:

This code will find the first input visible element in first form in DOM and set the cursor at the end of the text box. This stores the value of the textbox in temp string, resets it and reloads the text.

jQuery(document).ready(function(){

     var el=  jQuery('form:first :input:visible:enabled:first');
     el.focus();
     tmpStr= el.val();
     el.val('');
     el.val(tmpStr);

}};

Autofocusing on text box inside a modal dialog in Twitter bootstrap

I stumbled upon a problem today figuring out why .focus event is not working for a textbox inside a modal dialog while using twitter bootstrap until I found that .focus won't work for the elements outside the DOM when the page is first loaded.

The event in the Twitter bootstrap documentation named shown.bs.modal works perfectly well. Here is the sample of suppose I want to autofocus on email text field in the dialog(myModal is the id for the dialog, and exampleInputEmail2 is the id of the textbox


jQuery(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
  $('#exampleInputEmail2').focus();
 });
});