1. 程式人生 > 其它 >鍵盤彈起後頁面整體上推

鍵盤彈起後頁面整體上推

主要問題:

輸入框定位在頁面底部,頁面(包括自定義的導航欄)在鍵盤彈起後整體上推,;輸入框本身就位於頁面頂端,則不會造成上推事件。

解決:

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 }) }