Question

我正在尝试自动对焦此输入框，当按下“开始使用”时会出现：

<input name="hex" type="search" autofocus="autofocus">

然而，在应用自动对焦=“自动对焦”后>在输入中，这不适用。

我还试图给输入一个ID并使用jQuery：

$('input').focus();

但是，这似乎并不适用，任何人都可以帮忙吗？

Live example

Answer 1

基本上正在发生的事情是，当你点击按钮时它正在聚焦，所以当它在打开时叠加下来时它就不再聚焦了。

解决这个问题的方法是添加：

$('input').focus();

当你按下按钮上的叠加动画时，点击

将demo1.js的内容更改为：

(function() {
    var triggerBttn = document.getElementById( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
            $('input').focus();
        }
    }
    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

自动对焦不适用于输入框

1 个答案: