如何在键盘打开时隐藏浮动按钮（Android/iOS）？

Posted 2023-02-26

【中文标题】如何在键盘打开时隐藏浮动按钮（Android/iOS）？

【英文标题】：How to hide floating button on keyboard open(Android/iOS)?

【发布时间】：2020-02-28 12:36:06

【问题描述】：

我的网站上有一个使用 Reactjs 构建的浮动按钮。每当我在手机上打开键盘时，我都想隐藏那个按钮。

【问题讨论】：

***.com/questions/8241492/… [重复]

@KingKabyle 下次点击关闭按钮，然后作为副本关闭

这能回答你的问题吗？ How to listen for keyboard open/close in javascript/Sencha?

@Tschallacka 不，它隐藏了按钮，但是当我关闭键盘时，按钮没有出现。按钮出现在正文点击。

@gurupalsingh 那里有一个解释 window.height 的答案。你看过那个吗？不要总是只看接受的答案。

【参考方案1】：

当某些输入被聚焦时，键盘被打开。所以你可以用onFocus事件处理它

onFocus = () => 
    this.setState(hiddenButton: true)

onBlur = () => 
    this.setState(hiddenButton: false)


render() 
    <React.Fragment>    
        !this.state.hiddenButton ? <button>Click here</button> : null 
        <input 
            type='text'
            onFocus= this.onFocus  
            onBlur= this.onBlur  
            placeholder="Enter your text here."
        />
    <React.Fragment>

onBlur 事件在您离开输入时触发

希望对你有帮助

【讨论】：

无论何时打开键盘都会询问 OP。这可以重构以适用于任何 textarea/input/contenteditable=true 吗？

但我想在我的键盘打开时隐藏按钮，反之亦然。

当onFocus 事件触发时，它会设置按钮被隐藏的状态。在render() 方法中，如果按钮被隐藏，则不会呈现按钮。所以，当键盘打开时按钮是隐藏的

它隐藏了按钮，但是当我关闭键盘时，按钮没有出现。按钮出现在正文点击。

@Tschallacka 我认为没有全局事件监听是不可能的，但是因为 react 每次都会添加和删除 dom 而新的 dom 没有监听器，你应该再次添加它会影响性能