autocomplete 属性在html <input autocomplete="on|off">中的使用

本文详细解释了HTML表单元素中autocomplete属性的作用,如何正确使用及设置,强调了安全考虑,提供了实例代码并推荐了相关资源。

AutoComplete Screenshot

 

这个所谓的自动完成指的是当用户曾经使用过的字符提交[submit]过,保存在浏览器cookie里面的用户使用痕迹。和AJAX里的全文检索Autocomplete是另外一回事。

1. 有时候我们并不需要AutoComplete,例如需要用户自己再次输入而非自动完成。只要将所在表单元素的autocomplete属性设置为off即可。

<form action="form_action.asp">
名字:<input type="text" name="FirstName" value="" autocomplete="off" /><br />
姓氏:<input type="text" name="LastName" value="" autocomplete="on" /><br />
<input type="password" naem="pass"
autocomplete="on" /> 在html5中实验过没有起作用 但为了安全起见最好不要加这个。
<input type="submit" value="提交" />
</form>

2. 如果整个表单元素都不使用autocomplete功能的话,做如下设置就可以了.
<form autocomplete="off">
除了<input>还有<textarea>也有这个属性。

如果想了解更多可以参考:http://msdn.microsoft.com/en-us/library/ms533032(VS.85).aspx#security

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <!-- <link href="css/icons/font-awesome/font-awesome.css" rel="stylesheet" /> --> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <link rel="stylesheet" href="layui/css/admin.css" media="all"> <link href="css/icons.css" rel="stylesheet" /> <link href="css/base.css" rel="stylesheet" /> <link href="css/intercom.css" rel="stylesheet" /> <title>对讲管理</title> </head> <body class="noselect" unselectable="on" oncontextmenu="return false"> <div class="layui-card"> <div class="layui-card-body"> <table class="layui-hide" id="endpointsTable" lay-filter="endpointsTable"></table> <div class="acc-new-div" style="display:none"></div> <div class="acc-edit-div" style="display:none"></div> <div class="acc-new-one-div" style="display:none"></div> </div> </div> </body> <script src="js/jquery.min.js"></script> <script src="layui/layui.all.js"></script> <script src="js/main.js"></script> <script type="text/html" id="acc-new-div-html"> <div class="layui-card-body"> <div class="layui-tab layui-tab-brief" lay-filter="ext-tab-brief"> <ul class="layui-tab-title"> <li class="layui-this"><span class="mdi mdi-playlist-play tab-title-icon"></span>分机信息</li> <li><span class="mdi mdi-playlist-music tab-title-icon"></span>基本功能</li> <li><span class="mdi mdi-playlist-music tab-title-icon"></span>语音编码</li> <li><span class="fa fa-upload tab-title-icon"></span>高级选项</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">起始分机号</label> <div class="layui-input-inline"> <input id="start-extension-name" type="text" name="start-extension-name" lay-verify="required" autocomplete="off" class="layui-input extension-input" placeholder="" value="800"> </div> <label class="layui-form-label">添加数量</label> <div class="layui-input-inline"> <input id="extension-add-number" type="text" name="extension-number" lay-verify="required" autocomplete="off" oninput="inputNumber(this)" onafterpaste="inputNumber(this)" class="layui-input extension-num-input" placeholder="最大50个" maxlength = "2"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">分机密码</label> <div class="layui-input-inline"> <input id="extension-secret" type="text" name="extension-pass" lay-verify="required" autocomplete="off" class="layui-input extension-input" placeholder=""> </div> <label class="layui-form-label">随机密码</label> <div class="layui-input-inline"><input id="random-secret" type="checkbox" name="random-secret" lay-skin="switch" lay-filter="random-secret"></div> </div> <div class="layui-form-item"> <label class="layui-form-label">启用</label> <div class="layui-input-inline"><input id="ext-enable" type="checkbox" name="ext-enable" lay-skin="switch" lay-text=""></div> <label class="layui-form-label">拨号权限</label> <div class="layui-input-inline"> <select id="ext-diaplan" name="diaplan"> <option value="Diaplan1">Diaplan1</option> <option value="Diaplan2">Diaplan2</option> </select> </div> </div> </form> </div> <div class="layui-tab-item" id="v-acc-info"></div> <div class="layui-tab-item"> <form class="layui-form" action=""> <div class="layui-form-item"> <div id="audio-codec-transfer"></div> </div> </form> </div> <div class="layui-tab-item" id="v-acc-info-advanced"></div> </div> </div> </div> </script> <script type="text/html" id="acc-info-base"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">视频通话</label> <div class="layui-input-inline"><input id="ext-video" type="checkbox" name="ext-video" lay-skin="switch" lay-text=""></div> <label class="layui-form-label">视频编码</label> <div class="layui-input-inline"> <select id="ext-video-codec" name="video-codec"> <option value="h265">H.265</option> <option value="h264">H.264</option> <option value="h263">H.263</option> <option value="h261">H.261</option> <option value="vp9">VP9</option> <option value="vp8">VP8</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">通话监听</label> <div class="layui-input-inline"><input id="ext-monitor" type="checkbox" name="ext-monitor" lay-skin="switch" lay-text=""></div> <label class="layui-form-label">通话录音</label> <div class="layui-input-inline"> <select id="ext-call-record" name="call-record"> <option value="0">关闭</option> <option value="1">开启</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">同时注册数量</label> <div class="layui-input-inline"> <select id="ext-max-contacts" name="reg-max"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <label class="layui-form-label">注册超时</label> <div class="layui-input-inline"> <input id="ext-reg-timeout" type="text" name="ext-reg-timeout" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> </div> </form> </script> <script type="text/html" id="acc-info-advanced"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">Web分机</label> <div class="layui-input-inline"><input id="ext-web" type="checkbox" name="ext-web" lay-skin="switch" lay-text=""></div> <label class="layui-form-label">传输协议</label> <div class="layui-input-inline"> <select id="ext-transport" name="transport"> <option value="udp">UDP</option> <option value="tls">TLS</option> <option value="wss">WSS</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">DTMF模式</label> <div class="layui-input-inline"> <select id="ext-dtmf" name="dtmf"> <option value="rfc4733">RFC 4733</option> <option value="auto">AUTO</option> <option value="info">INFO</option> <option value="inband">INBAND</option> </select> </div> <label class="layui-form-label">RTP超时</label> <div class="layui-input-inline"> <input id="ext-rtp-timeout" type="text" name="ext-rtp-timeout" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">在线检测间隔</label> <div class="layui-input-inline"> <input id="ext-onl-frequency" type="text" name="ext-onl-frequency" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> <label class="layui-form-label">在线检测超时</label> <div class="layui-input-inline"> <input id="ext-onl-timeout" type="text" name="ext-onl-timeout" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> </div> </form> </script> <script type="text/html" id="acc-edit-div-html"> <div class="layui-card-body"> <div class="layui-tab layui-tab-brief" lay-filter="ext-tab-brief"> <ul class="layui-tab-title"> <li class="layui-this"><span class="mdi mdi-playlist-play tab-title-icon"></span>分机信息</li> <li><span class="mdi mdi-playlist-music tab-title-icon"></span>基本功能</li> <li><span class="mdi mdi-playlist-music tab-title-icon"></span>语音编码</li> <li><span class="fa fa-upload tab-title-icon"></span>高级选项</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">启用</label> <div class="layui-input-inline"><input id="ext-enable" type="checkbox" name="ext-enable" lay-skin="switch" lay-text=""></div> <label class="layui-form-label">名称</label> <div class="layui-input-inline"> <input id="ext-name" type="text" name="ext-name" lay-verify="required" autocomplete="off" class="layui-input" placeholder="" disabled="true"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input id="ext-pass" type="text" name="ext-pass" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> <label class="layui-form-label">拨号权限</label> <div class="layui-input-inline"> <select id="ext-diaplan" name="diaplan"> <option value="Diaplan1">Diaplan1</option> <option value="Diaplan2">Diaplan2</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input id="ext-email" type="text" name="ext-email" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> <label class="layui-form-label">语言</label> <div class="layui-input-inline"> <select id="ext-language" name="language"> <option value="en">English</option> <option value="ch">中文</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">外呼显示号码</label> <div class="layui-input-inline"> <input id="ext-out-number" type="text" name="ext-out-number" lay-verify="required" autocomplete="off" class="layui-input" placeholder=""> </div> <label class="layui-form-label">通话保持音乐</label> <div class="layui-input-inline"> <select id="ext-music-hold" name="musichold"> <option value="default">default</option> <option value="hold.mp3">hold.mp3</option> </select> </div> </div> </form> </div> <div class="layui-tab-item" id="v-acc-info"></div> <div class="layui-tab-item"> <form class="layui-form" action=""> <div class="layui-form-item"> <div id="audio-codec-transfer"></div> </div> </form> </div> <div class="layui-tab-item" id="v-acc-info-advanced"></div> </div> </div> </div> </script> <script type="text/html" id="toolbar"> <div class="tool-bar layui-card-body"> <button class="layui-btn layui-btn-lg" lay-event="refresh"><span class="mdi mdi-refresh mdi-icon"></span>刷新</button> <button class="layui-btn layui-btn-lg" lay-event="newsingleuser"><span class="mdi mdi-account-plus mdi-icon"></span>新建分机</button> <button class="layui-btn layui-btn-lg" lay-event="newuser"><span class="mdi mdi-account-plus mdi-icon"></span>批量新建分机</button> <button class="layui-btn layui-btn-lg layui-bg-red" lay-event="delete"><span class="mdi mdi-delete mdi-icon"></span>删除</button> </div> </script> <script type="text/html" id="optbar"> <a class="layui-btn layui-btn-xs" lay-event="edit"><span class="layui-icon layui-icon-edit bar-icon"></span>编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><span class="layui-icon layui-icon-delete bar-icon"></span>删除</a> </script> <script src="js/intercom.js"></script>帮我把里里面的中文翻译成西班牙语
09-13
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值