h5 input 禁止弹出虚拟键盘

最新推荐文章于 2023-10-13 16:27:29 发布

weixin_30719711

最新推荐文章于 2023-10-13 16:27:29 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wenxinsj/p/7884934.html

本文介绍如何在使用Element-UI框架的项目中，通过设置input元素的readOnly属性来阻止虚拟键盘弹出，确保自定义键盘样式的正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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