如何在 HTML 中打开关闭表单自动完成功能？

在 HTML 中，我们可以使用自动完成功能来帮助用户输入表单数据。自动完成功能可以根据用户的输入提供一些提示或者自动填充表单字段。

HTML5 的自动完成功能

HTML5 提供了两种主要的自动完成功能：自动填充和自动建议。

自动填充

自动填充功能会根据用户以前输入的信息自动填写表单字段。可以在 input 元素中使用 autocomplete 属性来开启或关闭自动填充功能。

<input type="text" name="username" autocomplete="on">

autocomplete 属性有以下几个可选值：

• on：浏览器会自动填充输入字段。这是默认值。
• off：关闭自动填充功能。

自动建议

自动建议功能会根据用户输入的前缀提供一些可能的值供选择。可以在 input 元素中使用 list 属性来指定一个数据列表，然后在 datalist 元素中定义这个数据列表。

<input type="text" name="fruit" list="fruits">

<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Orange">
</datalist>

在这个例子中，当用户输入值时，浏览器会根据数据列表中的选项进行自动建议。

JavaScript 控制自动完成功能

如果希望根据特定条件来控制自动完成功能的打开或关闭，我们可以使用 JavaScript。

打开自动完成功能

使用 JavaScript，我们可以通过将 input 元素的 autocomplete 属性设置为 on 来打开自动完成功能。

document.querySelector('input[name="username"]').autocomplete = 'on';

关闭自动完成功能

要关闭自动完成功能，我们可以将 autocomplete 属性设置为 off。

document.querySelector('input[name="username"]').autocomplete = 'off';

通过 JavaScript，我们可以根据用户的动作或者其他条件来控制自动完成功能的打开和关闭。

以上就是在 HTML 中打开和关闭表单自动完成功能的介绍。HTML5 提供了 autocomplete 和 datalist 属性，而 JavaScript 则提供了更多的灵活性来控制自动完成功能的行为。根据需求，你可以选择合适的方式来实现自动完成功能。