javascript - 如何隐藏打开键盘上的 float 按钮(Android/iOS)？

Question

我的网站上有一个 float 按钮，它是用 Reactjs 构建的。每当我在手机上打开键盘时，我想隐藏该按钮。

Answer 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 事件在您离开输入时触发

希望这对你有帮助