解决 element-plus el-input组件在iOS移动端的兼容问题，点击2次才能弹出键盘

解决 element-plus el-input组件在iOS移动端的兼容问题，点击2次才能弹出键盘

1. 现象：

在iPhone手机浏览器（Safari、Chrome、Firefox）上测试发现，带有 clearable 属性的 el-input，需要点击两次才会弹出软键盘，通过真机调试，发现和PC上存在以下差异：

上图是iPhone连接电脑，与Safari连调的截图，操作为点击两次表单输入框

el-input__suffix：显示 clearable 的 叉号 图标
is-focus: input 输入框边框变色，表示获取焦点，可编辑

解决思路

在移动端监听点击操作，获取input元素，自动执行一次点击方法，从而实现与PC相同的正常效果

import { DirectiveBinding } from 'vue'

const vMfocus = {
	mounted: (el: HTMLElement, binding: DirectiveBinding) => {
		if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
			el.addEventListener('touchend', event => {
				if (event.target instanceof HTMLInputElement) {
					event.target.focus()
				}
			})
		}
	}
}

<el-form-item prop="name" label="Name">
	<el-input v-model="form.name" placeholder="Name" v-mfocus clearable />
</el-form-item>

实测在iPhone手机的Safari、Chrome、Firefox浏览器上，点击表单输入框，均可直接触发编辑和弹出键盘。

备注：如果有很多表单页面，建议自定义指令全局注册

文中如有错误或不当之处，还请指出，不胜感激。