gpt4 book ai didi

html - 在输入(类型文件)上使用必需的属性会导致输入在 iPhone ios 11 上停止工作

转载 作者:行者123 更新时间:2023-12-03 17:36:43 27 4
gpt4 key购买 nike

我有一个用于上传图像的表单。输入(类型文件)有一个 required 属性,因此在选择文件之前选择提交会导致验证错误。当使用带有 ios 11 的 iPhone 时(我已经用 chrome、firefox 和 safari 进行了测试),如果您首先选择提交以接收验证错误(在 iPhone ios 11 上是“选择文件”),然后选择““选择文件”时仍然显示“选择文件”(意味着要重现问题,您不能先选择屏幕上的其他位置以消除“选择文件”验证错误),弹出窗口允许您选择一个文件不出现。从现在开始,即使刷新页面,“选择文件”也不会做任何事情。关闭浏览器(通过双击主页按钮并在浏览器上向上滑动),然后重新打开浏览器将允许输入再次工作(直到您按照上述说明重现问题)。我发现如果我在下面的代码中删除带有内容属性的元标记,则不会出现问题。

这是代码(只是一个基本形式)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title></title>
</head>
<body>
<form enctype="multipart/form-data">
<input required type="file" />
<input type="submit" value="Add File" />
</form>
</body>
</html>

关于为什么会发生这种情况的任何想法?

最佳答案

似乎是移动 Safari 错误。
我通过在半秒后模糊事件元素的焦点,最大限度地减少了在显示验证消息时有人点击输入的可能性。

var form = document.querySelector('form');
var button = document.querySelector('input[type="submit"]');
button.onclick = function (e) {
if (!form.checkValidity()) {
setTimeout(function () {
document.activeElement.blur();
}, 500);
}
};

关于html - 在输入(类型文件)上使用必需的属性会导致输入在 iPhone ios 11 上停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47082327/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com