HTML5中form如何关闭自动完成功能的方法


Posted in HTML / CSS onJuly 02, 2018

什么是HTML5的form自动完成功能?

首先,HTML5 中有个新属性autocomplete ,autocomplete 属性规定表单是否应该启用自动完成功能,它自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

如:

<form autocomplete="on">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="email" name="email" autocomplete="off" /><br />
  <input type="submit" />
</form>
<p>请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。</p>
<p>请注意,表单的自动完成功能是打开的,而 e-mail 域是关闭的。</p>

会发现,autocomplete="on"的会被“记录下来”,而E-mail的autocomplete="off",再次输入时不会被“记录”。这就是“HTML5中form的自动完成功能”啦!

还不太清楚的可以去w3school手册继续学习。

如何关闭自动完成功能

有时候我们希望关闭输入框的自动完成功能,例如当用户输入内容的时候,我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

关闭输入框的自动完成功能有3种方法:

1、在IE的Internet选项菜单里的内容--自动完成里面设置

2、设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能
(关闭整个表单(form)自动提示功能)

3、设置输入框(input)的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能(关闭密码域的自动完成)

测试代码:(在每个form输入文字然后提交,然后再回来看看能否自动完成,注意要提交后才能有历史记录,才可能自动完成;提交后页面可能出错,不用管它,后退回去即可)

打开自动完成功能的Form<br> 

<form name="form1" autocomplete="on">  
    打开自动完成功能的输入框  
    <input type="text" autocomplete="on" ><br>  
    关闭自动完成功能的输入框  
    <input type="text" autocomplete="off"><br>  
    <input type="submit" value="提交"><br>  
</form>

关闭自动完成功能的Form<br> 

<form name="form1" autocomplete="off">  
    打开自动完成功能的输入框  
    <input type="text" autocomplete="on"><br>  
    关闭自动完成功能的输入框  
    <input type="text" autocomplete="off"><br>  
    <input type="submit" value="提交"><br>  
</form>

建议:不要全部关闭自动完成功能,根据需要禁用一部分自动完成功能即可,如果你觉得浏览器自带的自动完成功能还不够强大,可以使用jquery插件来实现更加强大的自动提示完成功能。

比如百度搜索框的自动提示功能就非常强大。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 #HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 #HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 #HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 #HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 #HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 #HTML / CSS
详解android与HTML混合开发总结
Jun 06 #HTML / CSS
You might like
PHP 身份验证方面的函数
2009/10/11 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php简单实现数组分页的方法
2016/04/30 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python 伯努利分布详解
2020/02/25 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
建筑专业自荐信
2013/10/18 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
自主招生学校推荐信
2014/09/26 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
纪检监察立案决定书
2015/06/24 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android