1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 禁止浏览器自动填充密码框密码

禁止浏览器自动填充密码框密码

时间:2024-06-27 19:41:26

相关推荐

禁止浏览器自动填充密码框密码

<INPUT id="passWord" class="ipt" type="password" οnfοcus="changeIptType()" placeholder="请输入密码" autocomplete="off">

浏览器遇到type="password"的输入框会自动保存密码并自动填充。

网上很多是聚焦时更改密码框类型。

<INPUT id="passWord" class="ipt" type="text" οnfοcus="this.type='password'" placeholder="请输入密码" autocomplete="off">

存在以下问题:

1、添加autocomplete="off"(autocomplete其含义代表是否让浏览器自动记录之前输入的值)有时候并不是都有效果。

2、IE无法更改输入框的type类型,IE8的密码框输入后可能会显示成明文。

3、火狐使用tab、enter键切换到其它输入框可能还会记住密码。

解决方案:

<INPUT id="passWord" class="ipt" type="password" οnfοcus="changeIptType()" placeholder="请输入密码" autocomplete="off">

1、html代码中的输入框类型依旧为password不变。

2、进入页面时判断浏览器类型,非IE则改为text类型。

$(function(){

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

var isOpera = userAgent.indexOf("Opera") > -1;

if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

// IE浏览器

}

else

{

// 非IE浏览器 (IE不能修改输入框的type)

$("#passWord").prop("type","text");

}

});

3、聚焦时非IE浏览器输入框类型重置为password。

// 切换输入框类型

function changeIptType()

{

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

var isOpera = userAgent.indexOf("Opera") > -1;

if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

// IE浏览器

}

else

{

// 非IE浏览器 (IE不能修改输入框的type)

$("#passWord").prop("type","password");

}

}

4、提交表单数据验证时清空密码输入框。

<form action="Login/loginAction.action" method="post" οnsubmit="return checkForm()" style="">

<INPUT id="loginName" class="ipt userName" type="text" placeholder="请输入用户名" style="">

<INPUT id="passWord" class="ipt" type="password" οnfοcus="changeIptType()" placeholder="请输入密码" autocomplete="off">

<input type="hidden" id="pwd" name="passWord">

<input type="hidden" id="loginname" name="loginName">

<button type="submit" id="login" value="登录">登录</button>

</form>

function checkForm()

{

//1、此处为用户名、密码格式验证、加密处理等。

//2、验证处理完后将处理好的数据赋值给hidden类型输入框。

//3、清空密码框,解决FF按tab、enter键切换到密码输入框仍会自动填充密码问题。 $("#passWord").val("");

return true;

}

以下自己仅为自己代码记录,不喜勿喷(有什么更好的方法可以一起探讨。)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。