自动完成文字输入 [英] Autocomplete text input

问题描述

我知道有很多JavaScript解决方案，但是是否有HTML5方法可以自动输入文本呢? datalist元素几乎就是我想要的，除了它允许您输入自定义值而不是限制您使用列表中的内容.

I know there are a lot of JavaScript solutions, but is there an HTML5 method of having a text input with autocomplete? The datalist element is almost what I'm after, except it allows you to enter custom values rather than limiting you to what's in the list.

推荐答案

HTML5具有autocomplete属性，可以在字段中将其指定为on或off.

HTML5 has an autocomplete attribute which can be specified as either on or off in a field.

这是一个例子:

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

它的工作方式是，下次访问每个字段keyup上的该页面时，系统会建议您首次提交的值.

The way it works is that the values that you submit the first time will be suggested to you on subsequent times you visit this page on keyup of each field.

决定使用此功能的
• 键问题是浏览器兼容性之一.最好的选择是检查多个浏览器以确保其正常工作. caniuse.com 使得支持看起来很糟糕，但是我认为使用它来帮助那些拥有现代浏览器的人没有任何伤害.

• The key issue in deciding to use this feature is one of browser compatibility. Your best bet is checking multiple browsers to make sure it works. caniuse.com makes the support looks pretty bad, but I don't see any harm it using it to help those who have modern browers.

来自 W3Schools 的有关autocomplete的其他事实，在这种情况下并不讨厌，因为它确实涵盖了基础:

Other factoids about autocomplete from W3Schools, don't hate in this case as it does cover the basics:

• 启用自动完成功能后，浏览器会自动完成值 根据用户之前输入的值.
• 有可能 表单具有自动完成功能开"，具有特定输入的自动完成"功能 字段，反之亦然.
• 自动完成属性适用于 以及以下类型:文本，搜索，URL，电话，电子邮件， 密码，日期选择器，范围和颜色.

• When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
• It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
• The autocomplete attribute works with and the following types: text, search, url, tel, email, password, datepickers, range, and color.

这篇关于自动完成文字输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！