解决 input type=“password“ 标签自动记住账号密码问题

最新推荐文章于 2024-05-13 17:57:15 发布

原创

最新推荐文章于 2024-05-13 17:57:15 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

"本文介绍了一种防止HTML输入框自动记住密码的方法，通过将`<input type="password">`改为`<input type="text">`并自定义显示方式，将真实密码存储为属性值。在用户输入时，监听`input`事件，实时更新显示的星号（●）和隐藏的真实密码。此方法同时处理了光标位置的问题，确保在Windows 8系统中光标不会总移动到输入框末尾。"

html 解决 input type="password" 标签自动记住账号密码问题

- 主要实现逻辑
- 代码

主要实现逻辑

把input type=“password” 改成 type=“text” ，隐藏input密码，用 ‘●’ 代替input中的内容，把真实密码存到input标签的一个属性中实现，下面的逻辑，每次input框中内容变化，获取真实密码逻辑如下：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<form id="editPasswordForm" autocomplete ='off'>
		<input type="text" class="form-control validate[required]" autocomplete ='off' id="mopwd" mopwd="" placeholder="请输入原密码"/>
		<input type="text" class="form-control validate[required]" autocomplete ='off' id="newpwd1" newpwd1="" placeholder="请输入新密码"/>
		<input type="text" class="form-control validate[required]"  autocomplete ='off' id="newpwd2" newpwd2="" placeholder="请再次输入密码"/>
	</form>	
</body>
<script>
	$("#mopwd").on('input',function () {
   
   
	    var<