最近开发一个触屏的一个项目,需要用到自己的键盘样式,需要屏蔽虚拟的键盘,参考了一些网上的资料,最实用的还是利用input的属性 :readonly
以element-ui 为例 设置 readOnly='readOnly'
<el-input v-model="input" placeholder="请输入内容" readOnly='readOnly'></el-input>
//input
<input placeholder="请输入内容" readOnly='readOnly'></input>
在最近的项目发现element-ui input框在移动端没有屏蔽,得到焦点的时候还是能弹出输入法,最后发现了问题的所在,下面就是解决的方法:
<el-input v-model="input" placeholder="请输入内容" readOnly='readOnly' ref='input'></el-input>
其实我们这样写,readOnly这个属性作用的是最外层的<div>标签
<div class="el-input" readonly="readonly" ><input autocomplete="off" placeholder="请输入内容" type="text" rows="2" validateevent="true" class="el-input__inner"></div>
我们可以在初始化的时候设置input的属性,这样就解决问题了
this.$nextTick(()=>{ this.$refs.input.$el.children[0].setAttribute('readOnly','readOnly') })