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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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 实现的将图片转换为TXT
2015/10/21 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
公司市场部岗位职责
2013/12/02 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
计算机学生求职信范文
2014/01/30 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
五四青年节演讲稿
2014/05/26 职场文书
市场调查策划方案
2014/06/10 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书