对焦后,输入字段立即模糊
Input field immediately blurs after focus
根据这个答案,我尝试创建一个页面,如果输入字段得到焦点,则高度会缩小到足够小,以至于页面将无法滚动。如果输入字段失去焦点,则所有内容都将恢复到原始状态。
我尝试了这种技术,没有事件,只是通过控制台进入代码,它就像一个魅力,但是在将这些绑定到事件之后,一切都被毁了。我意识到,在我单击输入字段并执行绑定函数后,输入字段立即失去焦点。它将bind
记录到控制台,但不会unwrap()
,也不会更改scrollLocked
的值,因此在下一次单击时,它会再次wrap()
<div>
,并且会有多个。
我对这种行为的猜测是,在焦点之后,DOM 尚未创建,但它立即模糊并且执行速度如此之快,以至于它试图unwrap()
尚不存在的 DOM 元素。这个理论中唯一的陷阱是,在第二次或无数次点击之后,有很多height-helper
,但它仍然没有unwrap()
任何一个。
现场演示
.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;
});
http://jsfiddle.net/Tentonaxe/XGRhZ/1/
相关文章:
- Rails的问题,haml + javascript在字段对象的模糊
- 在 ng 重复中进行内联编辑时,输入字段会模糊
- 对焦后,输入字段立即模糊
- 清除输入,模糊文本区域和默认值(如果字段为空)
- 不会触发输入字段的更改和模糊事件
- 可编辑 - 输入字段上的最大长度,模糊时闪烁
- 输入字段上的角度模糊不起作用
- 轨道.jQuery表单提交字段模糊
- AngularJS中模糊事件后的重新聚焦输入字段
- 清除模糊上的输入字段
- Chrome(也许是Safari?)激发了“;模糊”;当浏览器失去焦点时,在输入字段上显示两次
- Elasticsearch多字段模糊搜索未首先返回精确匹配
- 输入字段模糊时,验证字段,如果无效则取消模糊事件
- Rails 表单:当在另一个字段中选择特定选项时,如何模糊字段
- 处理在余烬视图中TextField子字段的模糊
- 如何在模糊触发时限制对字段的验证
- 隐藏Android键盘在javascript输入字段模糊
- 输入字段,聚焦,赋值,模糊保持值,聚焦保持值
- Angularjs中的模态-只有当从一个字段中模糊出来时才更新第二个字段(Plunker附件)
- jQueryUI 自动完成 - 选择后的模糊字段