鉴于此示例代码，为什么在 iOS Safari/Chrome 上提交表单时，浏览器不会将页面滚动到顶部并在所需的单选框上显示验证错误？
这在文本输入字段以及这些浏览器的桌面版本和 Android 上按预期工作。
如果删除文本填充以缩短页面以使字段适合视口，则会显示验证消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Radio Test</title>
</head>
<body>
<p>iOS Safari/Chrome does not scroll the page/focus on required radio or checkbox input fields when submitting the form. It does however do this on text fields.</p>
<form>
<fieldset>
<legend>Select an option (required)</legend>
<p>
<label for="a">A</label>
<input name="a" type="radio" value="a" id="a" required>
<label for="b">B</label>
<input name="a" type="radio" value="b" id="b" required>
</p>
</fieldset>
<fieldset>
<legend>Enter a value (required)</legend>
<p>
<label for="c">C</label>
<input name="c" type="text" id="c" required>
</p>
</fieldset>
<div id="padding">
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
</div>
<p><button>Submit</button></p>
</form>
<p>
<a href="#" onclick="document.getElementById('padding').style.display='none';return false">Hide padding</a> |
<a href="#" onclick="document.getElementById('padding').style.display='block';return false">Show padding</a>
</p>
</body>
</html>
我已通过 Safari 错误报告/反馈页面向 Apple 报告了该错误，但我不确定这是否是报告该错误的正确位置。
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
