登录时保存用户名密码后新增表单中自动填充bug

登录时保存用户名密码后新增表单中自动填充bug

  • 1.问题描述
  • 2.解决思路

1.问题描述

最近在项目中遇到一个问题,使用的谷歌浏览器,登录的时候输入用户名密码,谷歌浏览器会提示是否保存用户名密码,为了方便调试,点击保存:
这里写图片描述
然后在功能模块中点击新增的时候,用户名密码会自动填充:
这里写图片描述
断点调试发现后台传过来的数据用户名account以及密码pwd的确是为空的:
这里写图片描述
浏览器在登录时候保存的用户名以及密码会在其为空的时候自动填充,如果点击修改时候弹出的这个页面,account和pwd不为空的时候页面是正常显示的:
这里写图片描述

2.解决思路

(1)
简单粗暴,直接在浏览器中将保存的用户名密码移除:
这里写图片描述
之后就不会有这个填充的用户名密码出现了。。。
(2)
网络上很多说法是将input的value值赋值为空,但是亲测无效,还是会自动填充,于是想到了另外一种方法:如果新增的时候传过来的account和pwd值为空,就为改input展示提示语,这样input默认不为空就也不会自动填充。
不过这个方法使用起来用户体验很奇怪。
(3)
添加HTML的autocomplete=”off”属性:
这里写图片描述
这样可以解决自动填充的问题,不过网上说这个autocomplete属性没有写入W3C规范,有些浏览器会忽略这个属性导致无法自动禁止填充,在谷歌浏览器确实会无法生效。
(4)
在input标签前面增加一个隐藏的标签,name值与account标签的name值一样,但是display=“none”的标签去隐藏浏览器传过来的值:
这里写图片描述
这个确实可以生效,但是会有一个问题,提交的时候会两个标签一起提交,比如账号栏想提交一个”aaa”,增加一个隐藏的input之后,会有两个”aaa”提交,变成”aaa,aaa”,将隐藏的input的value去掉也会提交”aaa,”,如果把name值修改掉又无法拦阻浏览器的自动填充。当然可以通过后台语句截取的方法实现保存,但是这样终归比较麻烦。
(5)
最后找了好一会,看到有一个解决思路比较厉害,将用户名设置为只读,input产生焦点的时候再将只读模式去掉,谷歌浏览器测试通过:
user.java文件

<input name="account" value="${Source.account}" 
htmlEscape="false" style="background-color: #fff" 
class="form-control required" maxlength="50" 
readonly onfocus="this.removeAttribute('readonly');">  </input>

如上代码,加上:readonly οnfοcus=”this.removeAttribute(‘readonly’);” 这段代码之后,就不会有浏览器将空的account标签自动填充的情况,再将背景颜色设置为界面原来的颜色,可以解决这个问题。
这里写图片描述
概括不全面,有其他方法欢迎指教。

已标记关键词 清除标记
相关推荐
<p style="font-size:14px;color:#333333;"> <span style="color:#000000;">1、课程简介</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置心、消息总线、负载均衡、断路器、数据监控等,都可以用Spring Boot的开发风格做到一键启动和部署。</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#FF0000;">       <span style="color:#000000;">在本套课程,我们将全面的讲解Spring Cloud技术栈, 从环境的部署到技术的应用,再到项目实战,让我们不仅是学习框架技术的使用,而且可以学习到使用Spring Cloud如何解决实际的问题。</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">Spring Cloud各个组件相互配合,合作支持了一套完整的微服务架构。</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">- 注册心负责服务的注册与发现,很好将各服务连接起来</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">- 断路器负责监控服务之间的调用情况,连续多次失败进行熔断保护。</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">- API网关负责转发所有对外的请求和服务</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">- 配置心提供了统一的配置信息管理服务,可以实的通知各个服务获取最新的配置信息</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">- 链路追踪技术可以将所有的请求数据记录下来,方便我们进行后续分析</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">- 各个组件又提供了功能完善的dashboard监控平台,可以方便的监控各组件的运行状况</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">2、适应人群</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">有一定的Java基础,并且要有一定的web开发基础。</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">3、课程亮点</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">       系统的学习Spring Cloud技术栈,由浅入深的讲解微服务技术。涵盖了基础知识,原理剖析,组件使用,源码分析,优劣分析,替换方案等,以案例的形式讲解微服务的种种问题和解决方案</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>l<span style="font-size:9px;">  </span></span><span>微服务的基础知识</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>软件架构的发展史</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>微服务的核心知识(CAP,RPC等)</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>l<span style="font-size:9px;">  </span></span><span>注册心</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Eureka搭建配置服务注册</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Eureka服务端高可用集群</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Eureka的原理和源码导读</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Eureka替换方案Consul</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Consul下载安装&服务注册&高可用</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>l<span style="font-size:9px;">  </span></span><span>服务发现与服务调用</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Ribbon负载均衡基本使用&源码分析</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Feign的使用与源码分析</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Hystrix熔断(雪崩效应,Hystrix使用与原理分析)</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Hystrix替换方案Sentinel</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>l<span style="font-size:9px;">  </span></span><span>微服务网关</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Zuul网关使用&原理分析&源码分析</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Zuul 1.x 版本的不足与替换方案</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>SpringCloud Gateway深入剖析</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>l<span style="font-size:9px;">  </span></span><span>链路追踪</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>链路追踪的基础知识</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Sleuth的介绍与使用</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>Sleuth与Zipkin的整合开发</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>l<span style="font-size:9px;">  </span></span><span>配置心</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>SpringClond Config与bus 开发配置心</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;"><span>n<span style="font-size:9px;">  </span></span><span>开源配置心Apollo</span></span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">4、主讲内容</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">章节一:</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">1.<span style="font-size:9px;">     </span>微服务基础知识</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">2.<span style="font-size:9px;">     </span>SpringCloud概述</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">3.<span style="font-size:9px;">     </span>服务注册心Eureka</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">4.<span style="font-size:9px;">     </span>Eureka的替换方案Consul</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">章节二:</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">1.<span style="font-size:9px;">     </span>Ribbon实现客户端负载均衡</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">2.<span style="font-size:9px;">     </span>基于Feign的微服务调用</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">3.<span style="font-size:9px;">     </span>微服务熔断技术Hystrix</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">4.<span style="font-size:9px;">     </span>Hystrix的替换方案Sentinel</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">章节三:</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">1.<span style="font-size:9px;">     </span>微服务网关Zuul的基本使用</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">2.<span style="font-size:9px;">     </span>Zuul1.x 版本的不足和替换方案</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">3.<span style="font-size:9px;">     </span>深入SpringCloud Gateway</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">4.<span style="font-size:9px;">     </span>链路追踪Sleuth与Zipkin</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">章节四:</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">1.<span style="font-size:9px;">     </span>SpringCloud Config的使用</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">2.<span style="font-size:9px;">     </span>SpringCloud Config结合SpringCloud Bus完成动态配置更新</span> </p> <p style="font-size:14px;color:#333333;"> <span style="color:#000000;">3.<span style="font-size:9px;">     </span>开源配置心Apollo</span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页