모바일에서 Input Text 에 값을 입력 시 하단 키패드 때문에 화면 가려지는 현상 해결

모바일에서 Input Text 에 값을 입력 시 하단 키패드 때문에 화면 가려지는 현상 해결

  // 예를 들어 state에 사이즈 조절 또는 display:none 을 할 state를 추가
  inputAutoSize: string

  // function ( 해당 예제는 class에 display:none 을 주어 화면이 안잘리게 하는 방법으로 진행 )
  handleFocusIn = () => {
    this.setState({ inputAutoSize: 'none' })
  }

  handleFocusOut = () => {
    this.setState({ inputAutoSize: '' })
  }

  // html ( stype을 state로 관리하여 포커스에 따라 display css 설정이 제어된다. )
  <section ..>
    <div style={{ display: inputAutoSize }}>
      <h2>TEST DIV DISPLAY NONE</h2>
    </div>
    <div>
      <input
        type={'text'}
        onFocus={this.handleFocusIn}
        onBlur={this.handleFocusOut}
        placeholder="아이디를 입력해주세요"
      />
    </div>
  </section>  

•