收藏
回答

input上覆盖一个元素实现遮罩层,模拟器与真机不同

问题模块
API和组件


公司名称


MP帐号(邮箱)


开发者微信号


机型(如iPhone 6s plus)

       OPPO    R9sk

操作系统(如iOS 9.3)

    android 6.0.1

是否必现


出现时间


操作路径(即如何操作可以复现该问题)

输入内容,点击内容去改变光标位置

问题描述(具体问题介绍)

目标效果是:想实现用户只能依次输入数字,不能点击内容去改变光标位置。做法:第一次点击input可以正常输入,这时候会有一个元素形成遮罩层类的效果,覆盖在input上,不允许用户去点击input来改变光标位置,但是input会获取焦点,可以继续输入。开发者工具显示正常,输入之后无法再点击到input去改变光标位置,真机上不行,只会点击到input,没有点击到遮罩层。



PS:想实现用户只能依次输入数字,不能点击内容去改变光标位置。如果有好方法的话,请告诉我,暂时没想到其他方式了0.0

问题截图(客户端问题界面截图)

模拟器上实现了

手机上:先输入内容,然后点击内容,没有触发遮罩层的点击

代码片段截图

.test{

position: relative;

width: 750rpx;

height: 100rpx;

}

.top{

position: absolute;

width: 100%;

height: 100%;

z-index: 100;

}

.input{

position: absolute;

width: 100%;

height: 100%;

z-index: 10;

box-sizing: border-box;

border: 1rpx solid #000;

color:rgba(204,204,204,1);

}

.input_placeholder{

color:rgba(204,204,204,1);

}


<view class='test'>

<view class='top' bindtap='top' wx:if="{{show}}"></view>

<input bindinput='input' bindtap='tap'  focus='{{focus}}' type='digit' value="{{value == 0 ?'':value}}" placeholder='请输入' placeholder-class='input_placeholder' class='input'></input>

</view>


最后一次编辑于  2017-12-26  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏