我正在尝试自动对焦此输入框,它会在按下“开始”时出现:
<input name="hex" type="search" autofocus="autofocus">
但是,在输入中应用 autofocus="autofocus"> 后,这并不适用。
我还尝试为输入提供一个 ID 并使用 jQuery:
$('input').focus();
但是,这似乎并不适用,有人可以帮忙吗?
最佳答案
基本上发生的事情是它正在聚焦,但当您单击按钮时它会取消聚焦,因此当叠加层在其上时它不再聚焦。
解决这个问题的方法是添加:
$('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 );
})();
关于html - 自动对焦不适用于输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23017081/