浏览器中form和iput设置autocomplete="off" 不起作用

本文介绍如何通过在HTML表单中添加隐藏字段来阻止360浏览器等特定浏览器的自动填充功能,同时还提供了针对不同浏览器的autocomplete属性设置方法。

开发中发现,360浏览器等为避免浏览器自动保存显示,form和iput设置autocomplete="off" 都不起作用。

解决办法:

<form method="post" action="merchantLogin.htm" id="loginform" autocomplete="off">

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

</form>


脑补:

<INPUT name="NAME" type="text" autocomplete="off" class="advsearchinp" id="NAME" onkeyup="changeName()" />

这里autocomplete属性是: input历史记录的功能,on是打开,off是关闭. 默认为on.

代表的意思为:是否让浏览器自动记录之前输入的值.

但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个号码进行多次查询,就没有必要让浏览器记录。  

MSIE自定义了input 的扩展属性 autocomplete,置为off即可 

< input type="text"  autocomplete="off"   id="number"/> 

用这个方法可以屏蔽MSIE,Firefox则需要使用另一个扩展属性disableautocomplete 

< input type="text"  disableautocomplete  id="number"/> 

两扩展属性可以同时使用,浏览器会根据自身特性自动解析。


<!-- 权限修改/Details --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../css/diy.css"> <script src="../../js/axios.min.js"></script> </head> <body> <article class="sign_in"> <div class="warp article_type"> <div class="layui-container"> <div class="layui-row"> <form class="layui-form" action=""> <div class="form-input-box"> <div class="layui-form-item"> <label class="layui-form-label">用户组</label> <div class="layui-input-block input-i block"> <input type="text" disabled="true" name="title" lay-verify="title" autocomplete="off" class="layui-input" id="user_group"> <!---显示权限所属的用户组,数据从后端获取--> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">权限名称</label> <div class="layui-input-block input-i block"> <input type="text" disabled="true" name="title" lay-verify="title" autocomplete="off" class="layui-input" id="mod_name_show"> <!---根据后端返回的路径动态生成名称--> </div> </div> <!--开关控件--> <div class="layui-form-item"> <label class="layui-form-label">是否可增加</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="add" lay-skin="switch" lay-text="是|否" id="add"> </div> </div> <div class="layui-form-item"> <label class=" layui-form-label">是否可删除</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="del" lay-skin="switch" lay-text="是|否" id="del"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否可修改</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="set" lay-skin="switch" lay-text="是|否" id="set"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否可查询</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="get" lay-skin="switch" lay-text="是|否" id="get"> </div> </div> </div> </form> <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-normal" id="submit"><span>确认</span></button> <button type="button" class="layui-btn layui-btn-normal" id="cancel"><span>取消</span></button> </div> </div> </div> </div> </article> </body> <script src="../../layui/layui.js"></script> <script src="../../js/base.js" charset="utf-8"></script> <script src="../../js/index.js"></script> <script> var BaseUrl = baseUrl() layui.use(['upload', 'element', 'layer'], async function () { var $ = layui.jquery , upload = layui.upload , element = layui.element , layer = layui.layer; let token = localStorage.getItem('token') || null let user_group = document.querySelector('#user_group') let mod_name_show = document.querySelector('#mod_name_show') let add = document.querySelector('#add') let del = document.querySelector('#del') let set = document.querySelector('#set') let get = document.querySelector('#get') let cancel = document.querySelector('#cancel') let submit = document.querySelector('#submit') let value = location.search.substring(1) let obj const {data: rese} = await axios.get(BaseUrl + '/api/auth/get_obj', { params: { auth_id: value } }) obj = rese.result.obj if (rese) { user_group.value = obj.user_group if (obj.path.replace('/'+obj.table_name+'/','')=='table'){ mod_name_show.value = obj.mod_name+'后台列表' } if (obj.path.replace('/'+obj.table_name+'/','')=='view'){ mod_name_show.value = obj.mod_name+'后台详情' } if (obj.path.replace('/'+obj.table_name+'/','')=='list'){ mod_name_show.value = obj.mod_name+'前台列表' } if (obj.path.replace('/'+obj.table_name+'/','')=='details'){ mod_name_show.value = obj.mod_name+'前台详情' } if (obj.path.replace('/'+obj.table_name+'/','')=='edit'){ mod_name_show.value = obj.mod_name+'前台编辑' } if (obj.add=="1"){ add.checked = true; } if (obj.del=="1"){ del.checked = true; } if (obj.set=="1"){ set.checked = true; } if (obj.get=="1"){ get.checked = true; } layui.form.render("checkbox"); } let set_data = {} submit.addEventListener('click', async function () { set_data['add'] = add.checked?1:0 set_data['del'] = del.checked?1:0 set_data['set'] = set.checked?1:0 set_data['get'] = get.checked?1:0 const {data: res} = await axios.post(BaseUrl + '/api/auth/set?auth_id=' + value, set_data, { headers: { 'x-auth-token': token, 'Content-Type': 'application/json' } }) if (res.result == 1) { layer.msg('<span>确认</span>/Confirm成功'); setTimeout(function () { // window.location.replace("./table.html"); colseLayer() }, 1000) } }) cancel.onclick = function () { // window.location = ('./table.html') colseLayer() } }) </script> <style type="text/css"> .layui-form-item{ margin-bottom: 50px; width: 600px; display: flex; } .layui-input-block{ position: relative; bottom: 38px; left: 37px; } </style> </html> 分析以上代码,都是什么作用功能
05-28
/** * 保存 */ @RequestMapping("/save") @PreAuthorize("hasAnyAuthority('generator:sysroleuser:save')") public Result save(@RequestBody NoticeMessage noticeMessage){ noticeMessageService.save(noticeMessage); return Result.succeed("保存成功"); } /** * 修改 */ @RequestMapping("/update") @PreAuthorize("hasAnyAuthority('generator:sysroleuser:update')") public Result update(@RequestBody NoticeMessage noticeMessage){ noticeMessageService.update(noticeMessage); return Result.succeed("修改成功"); } 修改代码,添加功能跟修改功能无法使用,以下是页面代码<div class="layui-card"> <div class="layui-card-header"> <h2 class="header-title">通知消息</h2> <span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a> <a><cite>通知消息</cite></a> </span> </div> <div class="layui-card-body"> <div class="layui-form toolbar"> 搜索: <select id="noticeMessage-search-key" lay-verify=""> <option value="">请选择</option> <option value="title">通知标题</option> </select>  <input id="noticeMessage-edit-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>  <button id="noticeMessage-btn-search" class="layui-btn icon-btn"><i class="layui-icon"></i>搜索</button> <button id="noticeMessage-btn-add" class="layui-btn icon-btn"><i class="layui-icon"></i>添加</button> </div> <!-- 数据表格 --> <table class="layui-table" id="noticeMessage-table" lay-filter="noticeMessage-table"></table> </div> </div> <script type="text/javascript" charset="utf-8" src="module/neditor/neditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="module/neditor/neditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="module/neditor/neditor.service.js"></script> <script type="text/javascript" charset="utf-8" src="module/neditor/i18n/zh-cn/zh-cn.js"></script> <script type="text/javascript" src="module/neditor/third-party/browser-md5-file.min.js"></script> <!-- 表单弹窗 --> <script type="text/html" id="noticeMessage-model"> <div class="model-container"> <form id="noticeMessage-form" lay-filter="noticeMessage-form" class="layui-form model-form" style="padding: 15px;"> <div class="layui-form-item" style="display:none"> <label class="layui-form-label">主键id</label> <div class="layui-input-block"> <input name="id" placeholder="请输入主键id" type="text" class="layui-input" /> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">通知标题</label> <div class="layui-input-block"> <input name="title" placeholder="请输入通知标题" type="text" class="layui-input" maxlength="128" lay-verify="required" required/> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">通知副标题</label> <div class="layui-input-block"> <input name="subTitle" placeholder="请输入通知副标题" type="text" class="layui-input" maxlength="35"/> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">客户端</label> <div class="layui-input-block"> <select name="accountType" id="accountType-children" lay-filter="accountType" lay-verify="required" required> <option value="">请选择客户端</option> <option value="0">居民端</option> <option value="1">医生端</option> <option value="2">全部</option> </select> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">App类型</label> <div class="layui-input-block"> <select name="appType" id="appType-children" lay-filter="appType" lay-verify="required" required> <option value="">请选择App类型</option> <option value="0">安卓端</option> <option value="1">苹果端</option> <option value="2">全部</option> </select> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">发布时间</label> <div class="layui-input-block"> <input name="publishDate" id="publishDate" placeholder="请选择发布时间" type="text" class="layui-input" maxlength="20" lay-verify="required" required/> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">通知条件</label> <div class="layui-input-block"> <input name="conditions" placeholder="通知条件" type="text" class="layui-input" maxlength="20" lay-verify="required" required/> </div> </div> <div class="layui-form-item notice-content-group"> <label class="layui-form-label">通知内容</label> <div class="layui-input-block"> <textarea name="content" id="content" style="width:100%;"></textarea> </div> </div> </form> <div class="model-form-footer" style="padding: 10px 15px; border-top: 1px solid #eee; text-align: right; background-color: #fff;"> <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button> <button class="layui-btn" lay-filter="noticeMessage-form-submit" lay-submit>保存</button> </div> </div> </script> <!-- 通知消息发布状态 --> <script type="text/html" id="noticeMessage-table-publishState"> <input type="checkbox" lay-filter="noticeMessage-table-publishState" value="{{d.id}}" lay-skin="switch" lay-text="发布|冻结" {{d.publishState==1?'checked':''}}/> </script> <!-- 表格操作列 --> <script type="text/html" id="noticeMessage-table-bar"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'laydate'], function () { var form = layui.form; var table = layui.table; var config = layui.config; var layer = layui.layer; var util = layui.util; var laydate = layui.laydate; var admin = layui.admin; var formSelects = layui.formSelects; var editor = null; // 声明全局编辑器变量 var currentDialogIndex = null; // 保存当前弹窗索引 // 添加自定义样式 var style = document.createElement('style'); style.textContent = ` .model-container { display: flex; flex-direction: column; height: 100%; } .model-form { flex: 1; overflow-y: auto; margin-bottom: 0; padding-bottom: 80px; } .model-form-footer { position: sticky; bottom: 0; z-index: 10; } .layui-form-item { margin-bottom: 15px !important; } .layui-form-label { padding: 9px 10px !important; width: 100px !important; } .layui-input-block { margin-left: 130px !important; } .layui-form-select dl { z-index: 9999 !important; max-height: 200px; position: absolute; } .notice-content-group { position: relative; z-index: 1; } .layui-layer-content { overflow: visible !important; } .model-form-scroll { overflow-y: auto; max-height: calc(100% - 60px); } .layui-form-select .layui-edge { top: 50%; margin-top: -3px; } .layui-unselect.layui-form-select span { color: #999; } `; document.head.appendChild(style); // 渲染表格 table.render({ elem: '#noticeMessage-table', url: config.base_server + 'api-primaryJydc/noticemessage/list', where: { access_token: config.getToken().access_token }, page: true, cols: [[ {type: 'numbers', title: '序号'}, {field: 'title', sort: true, title: '通知标题'}, {field: 'subTitle', sort: true, title: '通知副标题'}, {field: 'accountType', sort: true, templet: function(d){ return d.accountType =='0' ? "居民端" : d.accountType =='1' ? "医生端" : "全部"; },title:'客户端'}, {field: 'appType', sort: true, templet: function(d){ return d.appType =='0' ? "安卓端" : d.appType =='1' ? "苹果端" : "全部"; },title:'App类型'}, {field: 'content', sort: true, title: '通知内容'}, {field: 'publishDate', sort: true, templet: function (d) { return util.toDateString(d.publishDate); },title: '发布时间'}, {field: 'publishState', sort: true,templet:"#noticeMessage-table-publishState", title: '发布状态 '}, {field: 'conditions', sort: true, title: '条件'}, {align: 'center', toolbar: '#noticeMessage-table-bar', title: '操作', width: 250} ]] }); // 添加按钮点击事件 $('#noticeMessage-btn-add').click(function () { showEditModel(); }); // 表单提交处理 form.on('submit(noticeMessage-form-submit)', function (data) { layer.load(2); var url = ""; var $subTile = $("input[name='subTitle']").val(); // 副标题处理 if ($subTile === '' || $subTile === null) { // 空 var $content = UE.getEditor('content').getContentTxt(); data.field.subTitle = $content.substr(0, 35); } // 确定URL if (data.field.id === '') { url = config.base_server + 'api-primaryJydc/noticemessage/save'; } else { url = config.base_server + 'api-primaryJydc/noticemessage/update'; } // 发送请求 admin.req(url, JSON.stringify(data.field), function (response) { layer.closeAll('loading'); if (response.resp_code === 0) { layer.msg(response.resp_msg, {icon: 1, time: 500}); table.reload('noticeMessage-table'); closeEditorAndDialog(); } else { layer.msg(response.resp_msg, {icon: 2, time: 500}); } }, 'POST'); return false; }); // 工具条点击事件 table.on('tool(noticeMessage-table)', function (obj) { var data = obj.data; if (obj.event === 'edit') { if (data.publishState == 1) { layer.msg("已经发布,不能修改!", {icon: 2, time: 1500}); } else { showEditModel(data); } } else if (obj.event === 'del') { if (data.publishState == 1) { layer.msg("已经发布,不能删除!", {icon: 2, time: 1500}); } else { doDelete(obj); } } }); // 搜索按钮点击事件 $('#noticeMessage-btn-search').click(function () { var key = $('#noticeMessage-search-key').val(); var value = $('#noticeMessage-edit-value').val(); table.reload('noticeMessage-table', {where: {searchKey: key, searchValue: value}}); }); // 修改通知消息状态 form.on('switch(noticeMessage-table-publishState)', function (obj) { layer.load(2); admin.req('api-primaryJydc/noticemessage/updatePublishState', { id: obj.elem.value, publishState: obj.elem.checked ? 1 : 0 }, function (data) { layer.closeAll('loading'); if (data.resp_code == 0) { layer.msg(data.resp_msg, {icon: 1, time: 500}); table.reload('noticeMessage-table'); } else { layer.msg(data.resp_msg, {icon: 2, time: 500}); $(obj.elem).prop('checked', !obj.elem.checked); form.render('checkbox'); } }, 'GET'); }); // 监听下拉框变化,动态调整富文本高度 form.on('select(accountType)', adjustEditorHeight); form.on('select(appType)', adjustEditorHeight); // 初始化富文本编辑器 function initEditor(contentData) { if (editor) { UE.delEditor('content'); editor = null; } $('#content').show(); var editorHeight = calculateEditorHeight(); editor = UE.getEditor('content', { initialFrameWidth: '100%', initialFrameHeight: editorHeight, autoHeightEnabled: false, autoFloatEnabled: false, zIndex: 100 }); if (contentData) { editor.ready(function() { editor.setContent(contentData); }); } } // 计算富文本编辑器高度 function calculateEditorHeight() { if (!currentDialogIndex) return 300; var dialogHeight = $('.layui-layer:eq('+currentDialogIndex+')').height() || $(window).height() * 0.65; var otherElementsHeight = 0; $('#noticeMessage-form .layui-form-item').not('.notice-content-group').each(function() { otherElementsHeight += $(this).outerHeight(true); }); var availableHeight = dialogHeight - otherElementsHeight - 100; return Math.max(150, Math.min(400, availableHeight)); } // 调整富文本编辑器高度 function adjustEditorHeight() { if (!editor) return; var newHeight = calculateEditorHeight(); editor.setHeight(newHeight); } // 显示编辑弹窗 var showEditModel = function (data) { var content = $('#noticeMessage-model').html(); currentDialogIndex = layer.open({ type: 1, title: data ? '修改通知消息' : '添加通知消息', area: ['70%', '70vh'], maxWidth: 800, content: content, success: function(layero) { var contentDiv = layero.find('.layui-layer-content'); contentDiv.css({ 'padding': 0, 'overflow': 'visible' }); var formContainer = layero.find('.model-form'); formContainer.wrap('<div class="model-form-scroll"></div>'); $('#noticeMessage-form')[0].reset(); if (data) { form.val('noticeMessage-form', { id: data.id, title: data.title, subTitle: data.subTitle, accountType: data.accountType, appType: data.appType, conditions: data.conditions, publishDate: util.toDateString(data.publishDate, 'yyyy-MM-dd HH:mm:ss') }); } laydate.render({ elem: '[name="publishDate"]', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss' }); setTimeout(function() { form.render('select'); }, 100); setTimeout(function() { initEditor(data ? data.content : ''); }, 100); $(document).off('click', '[ew-event="closeDialog"]').on('click', '[ew-event="closeDialog"]', function() { closeEditorAndDialog(); }); }, end: function() { closeEditorAndDialog(); } }); }; // 关闭编辑器弹窗的清理函数 function closeEditorAndDialog() { if (editor) { UE.delEditor('content'); editor = null; $('#content').hide(); } if (currentDialogIndex !== null) { layer.close(currentDialogIndex); currentDialogIndex = null; } } // 删除 var doDelete = function (obj) { layer.confirm('确定要删除吗?', function (i) { layer.close(i); layer.load(2); admin.req('api-primaryJydc/noticemessage/delete?id=' + obj.data.id, {}, function (data) { layer.closeAll('loading'); if (data.resp_code == 0) { layer.msg(data.resp_msg, {icon: 1, time: 500}); obj.del(); } else { layer.msg(data.resp_msg, {icon: 2, time: 500}); } }, 'POST'); }); }; // 初始化下拉框样式 form.render('select'); }); </script>
最新发布
09-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值