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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML常用标签超详细整理
Mar 19 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代码
2013/11/19 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
php实用代码片段整理
2016/11/12 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JS重要知识点小结
2011/11/06 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
中止javascript执行的方法
2014/02/14 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
国税会议欢迎词
2014/01/16 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis