jQuery下拉框後輸入框焦點點擊

Question

我有jQuery下拉框，裏面有一個輸入框。現在我希望當我點擊下拉框時，它會自動對焦到輸入框。

的文本框HTML

<input type="text" name="username" id="username"/> 

和JS

if(jQuery) (function($) { 

$.extend($.fn, { 
    dropdown: function(method, data) { 

     switch(method) { 
      case 'hide': 
       hide(); 
       return $(this); 
      case 'attach': 
       return $(this).attr('data-dropdown', data); 
      case 'detach': 
       hide(); 
       return $(this).removeAttr('data-dropdown'); 
      case 'disable': 
       return $(this).addClass('dropdown-disabled'); 
      case 'enable': 
       hide(); 
       return $(this).removeClass('dropdown-disabled'); 
     } 

    } 
}); 

function show(event) { 

    var trigger = $(this), 
     dropdown = $(trigger.attr('data-dropdown')), 
     isOpen = trigger.hasClass('dropdown-open'); 

    // In some cases we don't want to show it 
    if($(event.target).hasClass('dropdown-ignore')) return; 

    event.preventDefault(); 
    event.stopPropagation(); 
    hide(); 

    if(isOpen || trigger.hasClass('dropdown-disabled')) return; 

    // Show it 
    trigger.addClass('dropdown-open'); 
    dropdown 
     .data('dropdown-trigger', trigger) 
     .show(); 

    // Position it 
    position(); 

    // Trigger the show callback 
    dropdown 
     .trigger('show', { 
      dropdown: dropdown, 
      trigger: trigger 
     }); 

} 

function hide(event) { 

    // In some cases we don't hide them 
    var targetGroup = event ? $(event.target).parents().addBack() : null; 

    // Are we clicking anywhere in a dropdown? 
    if(targetGroup && targetGroup.is('.dropdown')) { 
     // Is it a dropdown menu? 
     if(targetGroup.is('.dropdown-menu')) { 
      // Did we click on an option? If so close it. 
      if(!targetGroup.is('A')) return; 
     } else { 
      // Nope, it's a panel. Leave it open. 
      return; 
     } 
    } 

    // Hide any dropdown that may be showing 
    $(document).find('.dropdown:visible').each(function() { 
     var dropdown = $(this); 
     dropdown 
      .hide() 
      .removeData('dropdown-trigger') 
      .trigger('hide', { dropdown: dropdown }); 
    }); 

    // Remove all dropdown-open classes 
    $(document).find('.dropdown-open').removeClass('dropdown-open'); 

} 

function position() { 

    var dropdown = $('.dropdown:visible').eq(0), 
     trigger = dropdown.data('dropdown-trigger'), 
     hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null, 
     vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null; 

    if(dropdown.length === 0 || !trigger) return; 

    // Position the dropdown relative-to-parent... 
    if(dropdown.hasClass('dropdown-relative')) { 
     dropdown.css({ 
      left: dropdown.hasClass('dropdown-anchor-right') ? 
       trigger.position().left - (dropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right')) + hOffset : 
       trigger.position().left + parseInt(trigger.css('margin-left')) + hOffset, 
      top: trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top')) + vOffset 
     }); 
    } else { 
     // ...or relative to document 
     dropdown.css({ 
      left: dropdown.hasClass('dropdown-anchor-right') ? 
       trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset, 
      top: trigger.offset().top + trigger.outerHeight() + vOffset 
     }); 
    } 
} 

$(document).on('click.dropdown', '[data-dropdown]', show); 
$(document).on('click.dropdown', hide); 
$(window).on('resize', position); 

})(jQuery); 

任何人有任何建議，我在哪裏可以把到JS功能？ 謝謝。

Answer 1

$(document).on('click.dropdown', '[data-dropdown]', function(e) { 
    e.show; 
    $('#username').focus(); 
});