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

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

lxt_ds

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

阅读量745

点赞数

分类专栏：不太懂的前端文章标签： html javascript

本文链接：https://blog.csdn.net/lxt_nb/article/details/120127552

版权

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

摘要由CSDN通过智能技术生成

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',