模拟密码输入框在手机端弹出软键盘被遮挡

一般情况下我们都会将input的opacity的值设置为0.
问题就出在这,透明度调为0之后手机端的软键盘就将这个input给忽略了,导致元素被遮挡。
这里需要按条件去设置透明度

<view class="psw">
	<input :class="focusSecond ? 'transparent' : 'notransparent'" v-model="comfirmPsw" type="number" @focus="focusSecond = true" @blur="focusSecond = false" maxlength="6" />
	<view class="pswBox" :class="focusSecond ? 'highlight' : ''">
		<text>{{ comfirmPsw.slice(0, 1) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(1, 2) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(2, 3) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(3, 4) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(4, 5) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(5, 6) ? '●' : '' }}</text>
	</view>
</view>

你可能感兴趣的:(css,html)