鍵盤彈起後頁面整體上推
阿新 • • 發佈:2021-06-16
主要問題:
輸入框定位在頁面底部,頁面(包括自定義的導航欄)在鍵盤彈起後整體上推,;輸入框本身就位於頁面頂端,則不會造成上推事件。
解決:
1、adjustPosition屬性設定為fasle,鍵盤彈起時,不上推頁面
2、根據鍵盤高度設定輸入框的位置,實現鍵盤頂起輸入框的效果
具體程式碼如下
<Textarea style={{bottom:height+'px'}} autoFocus={true} value={value} maxlength={-1} showConfirmBar={false} placeholder='請輸入留言...' onInput={(e)=>this.changeContent(e)} adjustPosition={false} onFocus={(e)=>this.getHeight(e)} onBlur={this.resetHeight} ></Textarea> changeContent=(e)=>{ this.setState({ value:e.detail.value }) } getHeight=(e)=>{ // 鍵盤彈起時 this.setState({ //在編輯器中e.detail中只有value,真機上才有height height:e?.detail?.height==0?0:e.detail.height }) } resetHeight=()=>{ // 鍵盤收起時 this.setState({ height:0 }) }