自动填充文本输入

Question

我知道有很多JavaScript解决方案,但是有一种HTML5方法可以自动完成文本输入吗？datalist元素几乎就是我所追求的,除了它允许您输入自定义值而不是限制您到列表中的内容.

Answer 1

你应该试试这个datalist元素.它在W3C HTML5推荐书中明确定义,可能是现在和将来的最佳选择.

使用input元素上的list属性将datalist元素连接到input元素.

每个选项元素是datalist元素的后代,未被禁用,其值是不是空字符串的字符串,表示建议.每个建议都有一个值和一个 标签.

自v21.x以来谷歌Chrome和铬浏览器支持它(截至2014年12月,当前版本为39,检查其他浏览器的兼容性状态)Firefox和Opera也支持很长时间.现代(!)IE版本部分支持 datalist.

演示:由Eiji Kitamura 执行的伟大的工作数据主义者.

Polyfill:同时查看RelevantDropdown.它是一个依赖于jQuery和Modernizr的HTML5 datalist polyfill.

尝试运行此示例:

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3参考:https://www.w3.org/TR/html5/forms.html#the-datalist-element

Answer 2

HTML5有一个autocomplete属性,可以指定为on或off在字段中.

这是一个例子:

<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每个字段的.

• 决定使用此功能的关键问题是浏览器兼容性.您最好的选择是检查多个浏览器以确保其有效.caniuse.com让支持看起来很糟糕,但是我觉得使用它来帮助那些拥有现代浏览器的人并没有什么害处.

autocomplete来自W3Schools的其他事实,在这种情况下不讨厌,因为它涵盖了基础知识:

• 启用自动完成功能后,浏览器会根据用户之前输入的值自动完成值.
• 表单可以自动完成"打开",特定输入字段可以"关闭",反之亦然.
• autocomplete属性适用于以下类型:text,search,url,tel,email,password,datepickers,range和color.

Answer 3

这个问题已经过时了,但我有2017年的最新答案!

这里是官方当前WHATWG HTML标准的链接,用于启用自动完成功能.

以下答案来自我原来的答案:https://stackoverflow.com/a/41965106/1696153

现在要触发自动完成所需要做的就是input正确命名您的标签.

谷歌为开发对移动设备友好的Web应用程序编写了一个非常好的指南.他们有一节介绍如何在表单上命名输入以轻松使用自动填充.虽然它是为移动设备编写的,但这适用于桌面和移动设备!

如何在HTML表单上启用自动完成功能

以下是有关如何启用自动填充功能的一些要点:

• 使用a <label>表示所有<input>字段
• autocomplete在<input>标签中添加属性并使用本指南填写.
• 为所有标记正确命名您的name和autocomplete属性<input>

• 示例:

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

如何命名您的<input>标签

要触发自动填充,请确保在代码中正确命名name和autocomplete属性<input>.这将自动允许表单上的自动填充.一定要有一个<label>!此信息也可以在此处找到.

以下是如何命名输入:

• 名称
  • 使用以下任何一个name:name fname mname lname
  • 使用以下任何一个autocomplete:
    • name (全名)
    • given-name (名字)
    • additional-name (中间名)
    • family-name (姓氏)
  • 例: <input type="text" name="fname" autocomplete="given-name">
• 电子邮件
  • 使用以下任何一个name:email
  • 使用以下任何一个autocomplete:email
  • 例: <input type="text" name="email" autocomplete="email">
• 地址
  • 使用以下任何一个name:address city region province state zip zip2 postal country
  • 使用以下任何一个autocomplete:
    • 对于一个地址输入:
      • street-address
    • 对于两个地址输入:
      • address-line1
      • address-line2
    • address-level1 (州或省)
    • address-level2 (市)
    • postal-code (邮政编码)
    • country
• 电话
  • 使用以下任何一个name:phone mobile country-code area-code exchange suffix ext
  • 使用以下任何一个autocomplete:tel
• 信用卡
  • 使用以下任何一个name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • 使用以下任何一个autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• 用户名
  • 使用以下任何一个name:username
  • 使用以下任何一个autocomplete:username
• 密码
  • 使用以下任何一个name:password
  • 使用以下任何一个autocomplete:
    • current-password (用于登录表格)
    • new-password (用于注册和密码更改表单)

资源

• 当前WHATWG HTML自动完成标准.
• 来自Google的"创造惊人的形式".似乎几乎每天都会更新.优秀阅读.
• 2015年,Google帮助用户"通过自动填充功能更快地结帐".