Question

我有jQuery下拉列表，里面有一个输入框。现在我想要点击下拉列表然后它会自动聚焦到输入框。

for textbox 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);

任何人都有建议在哪里可以将$('#username').focus();放入JS函数中？感谢。

Answer 1

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

jQuery下拉单击后输入框焦点

1 个答案: