一般情况下我们都会将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>
<style>
.notransparent{
opacity: 0.1;
}
.transparent{
opacity: 0;
}
.psw {
position: relative;
width: 578rpx;
height: 88rpx;
}
.psw input {
width: 578rpx;
height: 88rpx;
position: relative;
z-index: 9;
color: #38317b;
}
.pswBox {
display: flex;
flex-shrink: 0;
text-align: center;
position: absolute;
z-index: 8;
top: 0;
left: 0;
}
.pswBox text {
width: 84rpx;
height: 84rpx;
border-radius: 20rpx;
font-size: 60rpx;
background: rgba(255, 255, 255, 0.1);
margin-right: 10rpx;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.highlight text {
border: 1px solid #4acabf;
transition: border-color 0.2s linear;
}
.pswBox text:last-child {
margin-right: 0;
}
</style>