根据this answer我尝试创建一个页面,如果输入字段获得焦点,则高度会缩小到足够小,以致页面将无法滚动。如果输入字段失去焦点,则一切都会恢复到原始状态。
我尝试了这种没有事件的技术,仅通过控制台输入代码,它的工作方式就像一个魅力,但在我将这些绑定(bind)到事件之后,一切都被毁了。我意识到,在单击输入字段并执行绑定(bind)函数后,输入字段立即失去焦点。它记录 bind
到控制台,但没有 unwrap()
并且也不会改变 scrollLocked
的值,所以在接下来单击它 wrap()
<div>
再次出现,将会有多个。
我对这种行为的猜测是,在焦点之后,DOM 尚未创建,但它立即变得模糊,并且执行得如此之快,以至于它尝试 unwrap()
尚不存在的 DOM 元素。这个理论中唯一的缺陷是,在第二次或无数次点击之后,会出现很多 height-helper
但仍然没有unwrap()
其中任何一个。
Live Demo
HTML
<input type="text" id="search-text">
<div id="spacer" style="height:1500px;"></div>
JavaScript/jQuery
var scrollLocked = false;
$(document).on('focus', '#search-text', function(){
if (!scrollLocked){
scrollLocked = true;
$('body').wrapInner(
$('<div id="height-helper"/>').css({
height: 300,
overflow: 'hidden'
})
);
}
});
$(document).on('blur', '#search-text', function(){
console.log('blur');
$('#height-helper').contents().unwrap();
scrollLocked = false;
});
为什么输入字段会立即失去焦点,而模糊功能却不会unwrap()
即使多次点击后?有办法实现我所描述的吗?
最佳答案
它失去焦点,因为您更改了它在 DOM 中的位置。您可以通过重新聚焦它然后使模糊处理程序仅在它位于辅助 div 内时捕获来解决此问题。
var scrollLocked = false;
$(document).on('focus', '#search-text', function(){
if (!scrollLocked){
scrollLocked = true;
$('body').wrapInner(
$('<div id="height-helper"/>').css({
height: 300,
overflow: 'hidden'
})
);
$(this).focus(); // *** Modified ***
}
});
$(document).on('blur', '#height-helper #search-text', function(){ // *** Modified ***
console.log('blur');
$('#height-helper').contents().unwrap();
scrollLocked = false;
});
关于javascript - 输入字段在焦点后立即模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19661772/