Html Webkit:在iOS WKWebView中呈现的文件输入选择器不能在一次点击下工作

我正在使用一个名为的前端javascript库来构建一个web应用程序，它看起来和感觉上都像一个原生的iOS/Android应用程序

我遇到了这种奇怪的行为，我必须双击某些按钮才能进行单击操作。从我的发现来看，这种奇怪的行为只发生在我的自定义输入按钮（即自定义文件上载按钮、自定义复选框按钮等）上

为了提供更多的上下文，我隐藏了浏览器呈现的不太令人愉快的默认文件

元素，而是显示自己的界面，用于打开文件选择器并显示用户想要上传的文件

您可以通过使用

display:none

设置输入元素的样式，并调用元素上的

click（）

方法来实现这一点，如下所述：

当我从mobile Safari应用程序访问我的web应用程序时，只需轻触一下即可工作。但是在内部，我必须快速点击两次才能调用iOS摄像头/文件选择器

下面是Onsen UI web应用程序中的HTML、CSS和JS片段

HTML:

<form>
  <label>
    <ons-button id="upload-button" type="button">Upload Photo
      <input id="image-selector" name="document_front" type="file" style="display: none" accept="image/*" capture="camera" />
    </ons-button>
  </label>
</form>

Javascript：

document.querySelector('#upload-button').onclick = function () {
    document.querySelector('#image-selector').click();

作为测试，我将控制台上的点击记录下来。我发现，Safari和Chrome（这些浏览器的移动版本也是如此）中启动了“点击图像选择器”，但WKWebView中没有启动

在花了几个小时浏览互联网之后，这似乎是由于webkit中的一个bug造成的。我能做些什么来解决这个问题

---

谢谢你

在我们的客户PWA的早期，我们只有在iOS设备上的Safari中才会遇到一个非常恼人的问题。有些按钮没有响应，有时需要多次点击才能最终响应。最后，我们进行了3项更改以成功解决此问题

不要使用“：hover”CSS伪元素

-恼人的移动双击链接问题| CSS技巧 https://css-tricks.com/annoying-mobile-double-tap-link-issue/ -确保UI元素位于顶部（z索引值），并使用 CSS类的“cursor”属性将获得“悬停”光标效果 不使用伪元素。

不要在按钮UI中使用透明胶片

-这一个特别令人讨厌，因为它通常意味着你需要创建或修改 获取具有内置所需背景颜色的图像资源。 -我想说的是，如果你有报告说 您的按钮没有响应。

确保按钮的“可敲击”区域尽可能大

这主要是一个测试项目。在你的手指边缘敲击时测试一下 按钮，而不是直接在图像或文本上，按钮仍会激活。 如果有时不这样做，那么考虑执行上面的修复。

document.querySelector('#upload-button').onclick = function () {
    document.querySelector('#image-selector').click();

- The Annoying Mobile Double-Tap Link Issue | CSS-Tricks https://css-tricks.com/annoying-mobile-double-tap-link-issue/ - Ensuring that your UI element is on top (z-index values) and using the “cursor” property of the CSS class will get you “on hover” cursor effects without using the pseudo element. - This one is especially annoying as it often means you need to create or get image assets that have the desired background color built in. - I would say it is OK to only worry about this one if you have reports of your button not being responsive. This is mostly a testing item. Test that when tapping at the edge of your button, not directly on the image or text, the button still activates. If it sometimes does not, then consider implementing the fixes above.