更改浏览器选项卡时,防止元素丢失CSS"焦点"

Question

JSFiddle说明了一切

• 打开这个小提琴http://jsfiddle.net/NfRN5/
• 单击输入字段
• 更改浏览器上的标签
• 回到小提琴 - 宽度效果将再次运行= /

怎么预防这个？当用户离开然后回来时,使其稳定

input.search-field {
width:100px;
transition: all 1s ease-in-out;
}
input.search-field:focus {
width:300px;
}

<input type="search" class="search-field">

Answer 1

在聊天中，您提到您正在尝试模仿 Apple.com 的搜索栏。

在他们的 JS 达到顶峰后，我想出了这个小提琴：http://jsfiddle.net/NfRN5/7/

诀窍是仅blur在鼠标按下或某些 es 之后的 10 毫秒内进行输入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)    
})