js限制浏览器记住账号密码

使用框架为angualr6

1、输入框

关键： autocomplete="off"

<input nz-input name="txtUsername" formControlName="username"placeholder="请输入账户" autocomplete="off">

2、密码框

type="password" autocomplete="new-password" name="txtPassword"

<!--用于浏览器定位-->
<input type="password" name="txtPassword" style="display:none">
<!--暴露出去的输入框-->
<input nz-input type="password" autocomplete="new-password" name="txtPassword" formControlName="password"placeholder="请输入密码" >

此时浏览器不会自定填充输入的账号和密码，但是还是为记录下来，当输入放入输入框时，还可以勾选填过的用户名和密码。

3、将密码框设置为type="text"，将值动态赋值给一个变量，然后将input的值修改为“●”

1）angualr

/*** 将密码框的值修改为'●'  angular的表单校验函数* @param val*/static onchange(val) {const value = val.value;/*** 获取到当前的this* @type {UserLoginComponent}*/const self: any = this;if (self.util.isString(value)) {const len = value.length;let str = '';for (let i = 0; i < len; i++) {str += '●';}const passwordValueLen = self.passwordValue.length;const passwordValue = self.passwordValue || '';if (passwordValueLen > len) {self.passwordValue = passwordValue.substr(0, passwordValueLen - (passwordValueLen - len));} else {self.passwordValue = passwordValue + value.substr(passwordValueLen,len - passwordValueLen);}document.getElementById('password')['value'] = str;}}

2）js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>密码框：<input id="password" placeholder="请输入密码"><br><span id="passwordVal"></span><script>window.onload = function() {const inputElement = document.getElementById("password");var flag = false;var passwordValue = '';function myFunction(e) {setTimeout(function () {var value = inputElement.value;if (!flag && typeof value == 'string') {const len = value.length;var str = '';for (var i = 0; i < len; i++) {str += '●';}const passwordValueLen = passwordValue.length;const passwordVal = passwordValue || '';if (passwordValueLen > len) {passwordValue = passwordVal.substr(0, passwordValueLen - (passwordValueLen - len));} else {passwordValue = passwordVal + value.substr(passwordValueLen,len - passwordValueLen);}document.getElementById('password')['value'] = str;}document.getElementById("passwordVal").innerHTML = "你的密码是: " + passwordValue;});}inputElement.addEventListener('compositionstart', function(e) {flag = true;});inputElement.addEventListener('compositionend', function(e) {flag = false;});inputElement.addEventListener('input', myFunction);inputElement.addEventListener('propertychange', myFunction);}</script>
</body>
</html>

js限制浏览器记住账号密码相关推荐

浏览器记住账号密码后，在密码输入框屏蔽浏览器的弹出提示
最近被这个问题纠缠了很久,前后改了三天,真的是遇到了很多坑. 首先查了下其他人的用法对autoComplete属性肤质为"new-password",但是这个属性在某些浏览器是不 ...
css 去掉浏览器记住账号密码后 input输入框黄色背景
给input框设置&:-webkit-autofill input{width: 100%;background: inherit;box-shadow: inherit;border: no ...
账号密码代码php,JS代码怎样实现记住账号密码
这次给大家带来JS代码怎样实现记住账号密码,JS代码实现记住账号密码的注意事项有哪些,下面就是实战案例,一起来看一下. 很多登录功能上都有个"记住密码"的功能,其实无非就是对coo ...
搜狗浏览器怎么保存账号密码搜狗浏览器保存账号密码教程
搜狗浏览器是一款非常安全的电脑浏览器.该软件能够对用户密码有安全保障,下面小编就为您带来搜狗浏览器保存账号密码教程. 搜狗浏览器怎么保存账号密码搜狗浏览器保存账号密码教程搜狗浏览器怎么保存账号密码 ...
Jsp使用Cookie完成记住账号密码的功能
网站中对于记住账号密码,方便下次登录的使用非常普遍,那么它是怎么实现的呢? 首先他的流程是,设计一个复选框,当选中复选框时,就会传值到处理页面,复选框的用途就是判断用户是否愿意记住账号密码. 我们通过 ...
C# ASP.NET MVC:使用Cookie记住账号密码
MVC记住账号密码使用cookie操作前端: 1 <div> 2 用户名:<input type="text" id="UserName" ...
uni-app 实现记住账号密码功能
1.示例: 2.代码: 只看核心代码块其他不用管 <template><view class="page"><view class="to ...
ssm实现记住账号密码（cookie）
cookie实现记住账号密码 1.需要实现的功能? 2.实现思路 3.后端代码 1.需要实现的功能? 在我们登陆的时候,页面有一个记住密码的单选框,如果用户勾选了记住密码,那么下次登陆的时候,就无需输 ...
Vue实现登录记住账号密码功能的思路与过程
文章来源: 学习通http://www.bdgxy.com/ 目录实现思路这里有三种方法来存储账号密码: 功能界面记住账号密码功能的具体实现密码加密 localStorage cookies ...

js限制浏览器记住账号密码

js限制浏览器记住账号密码相关推荐

最新文章

热门文章