h5 input 禁止弹出虚拟键盘

最近开发一个触屏的一个项目，需要用到自己的键盘样式，需要屏蔽虚拟的键盘，参考了一些网上的资料，最实用的还是利用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')
})

 

转载于:https://www.cnblogs.com/wenxinsj/p/7884934.html