一般登陆之后浏览器会询问是否记住密码,如果把密码记住在浏览器上,下次登陆的时候浏览器会把用户名和密码自动填充到登录页面。前段时间服务站平台的员工账号模块提测后,测试提出360浏览器记住密码后会自用把登陆账号和密码填充到添加账号页面和修改账号页面(部分其他浏览器也会有该问题),经过本地测试后发现确实存在该问题。 类似于这样:

  从用户的角度来说 这么整肯定不行,即使是浏览器的问题。通过组内人员的一步一步探索最终找到解决办法:

1. 通过网上搜索 发现有些文章是提供设置设置文本框的autocomplete属性为off,根据该方法修改后发现并没有解决问题,原来该属性的含义代表是否让浏览器自动记录之前输入的值。

2. 从一篇文章上看到 “大部分浏览器都是根据表单域的type="password"来判断密码域”,也给出了解决办法,“动态改变文本框”。

  在页面加载时不让它是密码框,改成文本框,果然密码就匹配不上了。当该密码框获取焦点后改变他的type属性  this.type="password",这种写法可以实现功能。但使用IE浏览器测试时发现在IE8及一下的浏览器中this.type会报错。该方法还是不能彻底解决这个问题。

3. 在文本框外面嵌套标签

<label id="password2"><input class="txt w-200" value="" type="text" id="SecondPwd" /></label>

  可以在文本框获取焦点之后直接改变label标签的html

$("#SecondPwd").live('focus', function () {
if ($(this).attr('type') == 'text') {
/*改变label标签的html*/
$('#password2').html('<input class="txt w-200" value="" type="password" id="SecondPwd" />');
/*标签获取焦点*/
$('#SecondPwd').focus();
}
})

  这种写法在IE8及以下浏览器下面都可以实现效果,但经过后期测试又发现在360急速模式下面仍然能够填充上用户名和密码,还得找其他的解决办法

4. 在使用第五种方法的之前,考虑把所有的框都先设为只读,然后在获取焦点后设置成可写,失去焦点后在只读,但密码框设置为可写之后仍会匹配上。

5. 加载一个显示的文本框和隐藏的密码框

<label id="password1">
<input class="txt w-200 fl" value="" type="text" name="txtPwd" id="txtPwd" />
<input class="txt w-200 fl" value="" type="password" name="Pwd" id="Pwd" style="display: none" readonly="true" />//为了防止隐藏的文本框被匹配上 先设置为只读
</label>

  当文本框再获取焦点之后

$("[name=txtPwd]").live('focus', function () {
/*当前文本框隐藏*/
$(this).hide();
/*隐藏的密码框显示并且获取焦点 只读属性去掉*/
$('#pwd1').show().attr('readonly', false).focus();
})

  如果大家也遇到这种问题可以参考一下这种方法,或者谁有更好的方法可以分享一下。

记住密码后,密码框Password会自动带出数据的更多相关文章

  1. Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题

    Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...

  2. 用友CDM系统“货位间商品移库单(一步)”表体增加“货位可用数量”字段,根据表头的选择的货位自动带出数值

    系统控制台——业务单据定制——货位间商品移库单(一步) 明细字段——增加“可销数量”字段. 然后修改明细字段的“商品编号”自定义查询方案. 增加自定义资料检索方案hwyksp SQL: select ...

  3. PyCharm新建.py文件时自动带出指定内容

    如:给Pycharm加上头行  # coding:utf-8File—Setting—Editor--Code Style--File and Code Templates--Python Scrip ...

  4. XSS攻击:获取浏览器记住的明文密码

    作者:余弦(@evilcos) 0x01. XSS获取明文密码的多种方式 我已经感受到Web潮流带来的巨大革新,尤其是最近HTML5越来越火.浏览器们在客户端瓜分着这个Web OS,只要是对用户体验好 ...

  5. jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第一话):初次启动jenkins,输入给定密码后登录失败问题解决

    Jenkins是一个持续集成平台,它能够从git等源码管理服务器拉取代码.打包并发布到tomcat等中间件,只要配置好相关插件,就可以做到项目的自动化构建.部署,不论是对开发来说监控代码质量,还是对测 ...

  6. chorme 浏览器记住密码后input黄色背景处理

    使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景: 方法1:阴影覆盖 input:-webkit-autofill { -we ...

  7. chorme 浏览器记住密码后input黄色背景处理方法(两种)

    使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景: 方法1:阴影覆盖 input:-webkit-autofill {   - ...

  8. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  9. chorme浏览器记住密码后input黄色背景处理方法总结(三种)

    问题分析 正常情况: 记住密码后访问: 解决方法 方法1:阴影覆盖input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white ins ...

随机推荐

  1. 计算机图形学:贝塞尔曲线(Bezier Curve)

    计算机图形学:贝塞尔曲线(Bezier Curve) 贝塞尔能由贝塞尔样条组合而成,也可产生更高维的贝塞尔曲面.

  2. 什么是Java内存模型中的happens-before

    Java内存模型JMM Java内存模型(即Java Memory Model , 简称JMM),本身是一种抽象的概念,并不真实存在,它描述的是一组规则或规范,通过这组规范定义了程序个各个变量(包括实 ...

  3. 第三届上海市大学生网络安全大赛wp&学习

    wp 0x00 p200 先分析了程序关键的数据结构 分析程序逻辑,在free堆块的时候没有清空指针,造成悬挂指针,并且程序中给了system('/bin/sh'),可以利用uaf 脚本如下: 1.先 ...

  4. Xcode中的约束用法

    这篇文章用几个简单的例子来介绍XCode6.1故事板中约束的使用方法.   现在iOS设备屏幕的尺寸也有很多种了,尤其是有了iPhone6 Plus以后,再不关注界面的尺寸适配就有点说不过去了.   ...

  5. JavaScript调试技巧之console.log()详解--2015-08-07

    对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断 JavaScript程序的执行,从而造成副作用:而cons ...

  6. awk纯干货

    AWK的惊人表现: Awk设计的目的:简化一般文本处理的工作. 属于POSIX的一部分. AWK命令行: Awk的调用可以定义变量.提供程序并且指定输入文件: Awk [ -F fs ]  [ -v ...

  7. path.join()与path.resolve()区别

    1.path.resolve([...paths]) path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径. 给定的路径的序列是从右往左被处理的,后面每个 path 被依次 ...

  8. laravel中的gate

    public function boot(){ $this->registerPolicies(); Gate::define('update-post',function($user,$pos ...

  9. 【css】报错,错误代码77,CURLE_SSL_CACERT_BADFILE (77)解决方法

    CURLE_SSL_CACERT_BADFILE (77) - 读取 SSL CA 证书时遇到问题(可能是路径错误或访问权限问题) 在微信接口相关开发时容易出现此问题 这一般是因为服务更新了相关的软件 ...

  10. sublime__最全面的 Sublime Text 使用指南

    感谢大佬--> 原文链接 摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Sublime Text中文教程. 前言(Prologue) Sublime T ...