评论

cover-view下使用input输入文本内容

cover-view与input相融

官方显示,cover-view是无法兼容input标签的

不过依然可以取巧,一样可以实现input的输入效果,
问题有两个,一个是控制台报错,
还有一个是input的光标不能显示出来

当前内容是基于美团的mpvue框架,和原生小程序略有差异,不过原理相通

正文开始
html如下

css如下


这里input标签里面,一个left位移是因为在安卓机器下,会出现cover-view内的内容和input标签内容出现重复,有重影的样式问题,在ios就没有,这个是兼容问题
input标签设置opacity 0也没有用
js如下

blurInput方法是用来在键盘消失后,也就是input失去焦点后,手动把
焦点变量置为false
getFocus方法是用户每次点击输入框的时候重新拉起键盘,输入内容

原因input标签的拉取键盘,获取焦点的机制默认是有效的,但是在添加focus属性后,控制焦点的false->true在失去焦点后,不会自动为false,必须手动重置


最后,通过watch来监听变化,把input输入的东西同步到cover-view上

最后一次编辑于  11-25  
点赞 1
收藏
评论