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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
HTML中link标签属性的具体用法
May 07 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求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
用正则表达式替换图片地址img标签
2013/11/22 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
浅谈Python基础之I/O模型
2017/05/11 Python
对Python w和w+权限的区别详解
2019/01/23 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
基于python实现学生信息管理系统
2019/11/22 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
运动会广播稿50字
2014/01/26 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
爱牙日活动总结
2014/08/29 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书