javascript - 如何使用 <input > 在 <input > 中启用自动完成

Question

我不是网络开发人员，但我有一个任务是为输入框添加自动完成功能。请把我当成一个初学者。

<div>
  <label id="email_label" for="send_email" style="padding-right:5px">
    Send Email:
  </label>
  <input id="send_email" type="text" placeholder="e.g. xx.yy@zz.com" />
  <button id="ack" onclick="requestAck()">
    Request
  </button>
</div>

requestAck() 是一个 javascript 函数，向用户提供的地址(即 <input > 中的地址)发送电子邮件。我正在尝试在 <input autocomplete="on" ...> 中添加一个标志，但它不起作用。也许是因为它不在 <form></form> 中环境。

你能帮我修改这段代码，在不改变其他功能的情况下添加自动完成(从缓存中)。非常感谢!

Answer 1

尝试在输入标签上设置属性 name="email"，如果没有设置，浏览器不知道应该用什么来自动完成字段:)

提示:我强烈建议您使用 type="email" 而不是文本将输入类型设置为电子邮件，这不是必需的，但它有助于验证输入!

检查这段代码:

        <div>
            <label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
            <input id="send_email" type="email" name="email" placeholder="e.g. xx.yy@zz.com" />
            <button id="ack" onclick="requestAck()">Request</button>
        </div>

编辑:评论中讨论的最终解决方案

<form onsubmit="submitForm(event)">
  <label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
  <input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy@zz.com" />
  <button id="ack" type="submit">Request</button>
</form>
<script>
  function submitForm(e) {
    e.preventDefault(); // this prevents the page from reloading
    requestAck();
  }

  //dummy function so the javascript won't crash:
  function requestAck() {}
</script>

工作示例:https://codesandbox.io/s/focused-cray-ubkw4