如何防止这种情况?当用户离开然后回来时保持稳定
input.search-field {
width:100px;
transition: all 1s ease-in-out;
}
input.search-field:focus {
width:300px;
}
<input type="search" class="search-field">
答案 0 :(得分:2)
在聊天中你提到你试图模仿Apple.com的搜索栏。
在他们的JS达到顶峰之后,我想出了这个小提琴:http://jsfiddle.net/NfRN5/7/
诀窍是在mousedown或一些blur
之后的10ms内仅keypress
输入。
var $search = $('.search-field'), searchBlurable = false
$search
// Always focus when focused
.focus(function(e){
$search.addClass('focused')
searchBlurable = false
})
// Only blur after mouse or key events
.blur(function(e){
if(searchBlurable){
$search.removeClass('focused')
}
})
// Set Blurable for tab/esc
.keydown(function(e){
if(e.keyCode === 27 || e.keyCode === 9) { // esc || tab
searchBlurable = true
$search.blur()
}
})
// Set Blurable for 10ms after a mousdown
$('html').mousedown(function(e){
searchBlurable = true
window.setTimeout(function () {
searchBlurable = false
}, 10)
})
答案 1 :(得分:0)
我不相信可以在纯CSS中实现。
尝试一些JavaScript / jQuery:http://jsfiddle.net/NfRN5/3/
var $fields = $(".search-field")
$fields.focus(function(){
$fields.removeClass('focused')
$(this).addClass('focused')
})
您无法使用blur
事件,因为更改标签时浏览器会调用此事件。
我对应用程序中其余代码的外观做了一些假设,您可能需要添加一些其他触发器来删除焦点类。