Question

给出此示例代码，为什么在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报告了该错误，但是我不确定这是否是报告错误的地方。

iOS Safari和Chrome为什么不滚动页面并在复选框和单选框的输入字段中显示验证消息？

0 个答案: