van-field组件设置为textarea属性被软键盘遮挡问题
在移动端van-field 输入框当type为text时,调出软键盘输入框会被顶上去,但type为textarea时不会被顶上去,可以用下面方法来实现:
1. 来2个van-field type为text的输入框z-index: 1 type为textarea的输入框z-index: 9999,确保多行输入框遮盖住单行输入框
<div class="input-wrapper"><van-fieldref="fieldRef"v-model="invalidDesc":autofocus="true"type="text"rows="8"autosizeclass="fee-textarea"placeholder="请输入施工过程及所需资金"name="radio"@focus="onFocus"@blur="onBlur"/><van-fieldref="fieldRef2"v-model="orderDesc"label-width="100%"label=""class="largeWidth fee-textarea-2"type="textarea"placeholder="请输入施工过程及所需资金"/></div>
.input-wrapper {position: relative;height: 220px;.fee-textarea {position: absolute;top: 0;z-index: 1;}.fee-textarea-2 {position: absolute;top: 0;z-index: 99999;height: 100%;}
}
2. 当调出软键盘时,先给type为text的输入框上焦点,让其顶上去,然后再给type为textarea的输入框上焦点
nextTick(() => {fieldRef.value.focus()setTimeout(() => {fieldRef2.value.focus()}, 200)})