办理使用document.activeElement.blur()克制弹脱手机默认键盘，ios版本17以 ...

一、常见的克制input弹脱手机默认键盘的办理办法

1、readonly

1. // readonly表示此域的值不可修改
2. <input type="text"  readonly="readonly" />

复制代码

2、document.activeElement.blur()

1. <input @click="handledStopdefault"/>
2. // 在input获取焦点的时候，在使用blur()的方法就可以将虚拟键盘给隐藏了
3. handledStopdefault(){
4.     document.activeElement.blur();//屏蔽默认键盘弹出；
5. }

复制代码

现在在安卓、ios版本16没有发现出现闪屏题目，但是在ios版本17以上会出现闪屏题目，影响体验。 
二、使用inputmode属性，办理ios版本17以上克制input弹脱手机默认键盘，同时不出现闪屏题目

在MDN中是如许界说inputmode的：

   inputmode 全局属性 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据范例的提示。它可以是以下值：
  "none"
  无虚拟键盘。在应用程序大概站点必要实现本身的键盘输入控件时很有用。
  
  "text"
  使用用户当地域域设置的标准文本输入键盘。
  
  "decimal"
  小数输入键盘，包罗数字和分隔符（通常是“ . ”大概“ , ”），设备可能也可能不显示减号键。
  
  "numeric"
  数字输入键盘，所必要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
  
  "tel"
  电话输入键盘，包罗 0 到 9 的数字、星号（*）和井号（#）键。表单输入内里的电话输入通常应该使用 <input type="tel"> 。
  
  "search"
  为搜索输入优化的虚拟键盘，比如，返回键可能被重新标志为“搜索”，也可能另有其他的优化。
  
  "email"
  为邮件地址输入优化的虚拟键盘，通常包罗"@"符号和其他优化。表单内里的邮件地址输入应该使用 <input type="email"> 。
  
  "url"
  为网址输入优化的虚拟键盘，比如，“/”键会更加显着、历史记录访问等。表单内里的网址输入通常应该使用 <input type="url"> 。
  
  如果没有设置这个属性，它的默认值是 "text"，表明使用当地的标准文本输入键盘。
  为了兼容17以上版本的ios，可以添加inputmode属性

1. <input inputmode="none"/>
2. // 如果使用了vant组件中的 van-field ，也可以加上inputmode属性来实现，
3. //因为它最终使用的也是input，会继承inputmode属性。

复制代码

但同时，在低版本的ios(如11以下)不支持该属性。根据具体场景使用对应的方法。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。