【问题标题】:Prevent element to lose CSS "focus" when changing browser tabs更改浏览器选项卡时防止元素失去 CSS“焦点”
【发布时间】:2024-01-13 02:04:01
【问题描述】:

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">

【问题讨论】:

  • 有趣的错误,似乎找不到任何解决方案。

标签: css input tabs focus


【解决方案1】:

在聊天中你提到你试图模仿 Apple.com 的搜索栏。

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

诀窍是在鼠标按下后的 10 毫秒内仅blur 输入,或者一些keypresses。

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)    
})

【讨论】:

    【解决方案2】:

    我不相信这可以在纯 CSS 中实现。

    尝试一些 JavaScript / jQuery:http://jsfiddle.net/NfRN5/3/

    var $fields = $(".search-field")
    
    $fields.focus(function(){
        $fields.removeClass('focused')
        $(this).addClass('focused')
    })
    

    您不能使用blur 事件,因为它会在您更改选项卡时由浏览器调用。

    我对您应用中的其余代码的外观做了一些假设,您可能需要添加一些其他触发器来移除焦点类。

    【讨论】:

    • 看起来不错。是否可以删除焦点类而无需单击另一个输入?例如,点击空白(我也会用谷歌搜索,但如果它很容易回复那就太好了)