0

I have one floating button on my website which is built in Reactjs. I want to hide that button whenever i'll open keyboard on phone.

gurupal singh
  • 143
  • 7
  • https://stackoverflow.com/questions/8241492/how-to-listen-for-keyboard-open-close-in-javascript-sencha [DUPLICATE] – KingKabyle Feb 28 '20 at 12:37
  • @KingKabyle next time hit the close button and then close as duplicate – Tschallacka Feb 28 '20 at 12:40
  • Does this answer your question? [How to listen for keyboard open/close in Javascript/Sencha?](https://stackoverflow.com/questions/8241492/how-to-listen-for-keyboard-open-close-in-javascript-sencha) – Tschallacka Feb 28 '20 at 12:41
  • @Tschallacka No, it hides the button but when I close the keyboard, button doesn't appear. Button appears on body click. – gurupal singh Feb 28 '20 at 13:17
  • @gurupalsingh There is an answer there that accounts for window.height. have you looked at that one? Don't always only look at the accepted answer. – Tschallacka Feb 28 '20 at 13:53

1 Answers1

1

Keyboard is opened when some input is focused. So you can handle it with onFocus event

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 event is fired when you leave input

Hope this helps you

Malkhazi Dartsmelidze
  • 4,783
  • 4
  • 16
  • 40
  • The OP asked whenever keyboard is opened. Could this be refactored to apply to any textarea/input/contenteditable=true? – Tschallacka Feb 28 '20 at 12:51
  • but i want to hide the button when my keyboard is open and vise versa. – gurupal singh Feb 28 '20 at 13:14
  • When `onFocus` event fires it sets state that button is hidden. In `render()` method if button is hidden it button is not rendered. So, button is hidden when keyboard is opened – Malkhazi Dartsmelidze Feb 28 '20 at 13:19
  • It hides the button but when I close the keyboard, button doesn't appear. Button appears on body click. – gurupal singh Feb 28 '20 at 13:22
  • @Tschallacka I think it's not possible without global event listened but since react adds and removes dom every time and new dom doesn't have listener and you should add it again which affects performance – Malkhazi Dartsmelidze Feb 28 '20 at 13:23
  • @gurupalsingh how you close keyboard? clicking on another place yes? in that case keyboard loses focus and fires `onBlur` event, so button is visible – Malkhazi Dartsmelidze Feb 28 '20 at 13:25