根据this answer我尝试创建一个页面，如果输入字段聚焦，则高度缩小到足以使页面不可滚动。如果输入字段失去焦点，则所有内容都恢复到原始状态。
我尝试了这种技术，没有事件只通过控制台输入代码，它就像一个魅力，但在我将它们绑定到事件后，一切都毁了。我意识到在点击输入字段并执行绑定功能后，输入字段立即失去焦点。它会将bind记录到控制台，但不会unwrap()，也不会更改scrollLocked的值，因此在下次点击wrap() { {1}}再次，会有多个。
我对此行为的猜测是，在焦点之后，DOM尚未创建，但它会立即模糊，并且执行得如此之快以至于它尝试<div>尚未存在的DOM元素。这个理论中唯一的缺陷是，在第二次或没有点击之后，有很多unwrap()但它仍然没有height-helper任何一个。
unwrap()<input type="text" id="search-text">
<div id="spacer" style="height:1500px;"></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'
})
);
}
});
$(document).on('blur', '#search-text', function(){
console.log('blur');
$('#height-helper').contents().unwrap();
scrollLocked = false;
});
？有没有办法实现我所描述的目标？
答案 0 :(得分：4)
因为你改变了它在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;
});