通过js代码手动实现密码输入框
概述
因为安全问题需要禁止浏览器保存密码，而浏览器是通过input的type='password’识别是否保存密码的，所以只需要将type变成text，然后使用js代码手动实现即可。使用网上的方法基本都失败，所以还是自己实现不偷懒了。
前端页面
<!DOCTYPE html><html lang="ch"><head><meta charset="UTF-8"><title>登录</title></head><body><form method="post" action="index1.html"><label for="username">用户名</label><input type="text" name="username" id="username" placeholder="账号"><label for="passwordDisc">密码</label><!--显示特殊符号，禁止复制、截切、右击、文本提示--><input type="text" id="passwordDisc" placeholder="密码" oncopy="return false;"oncut="return false;" oncontextmenu="return false;" autocomplete="off" autocorrect="off"><!--密码真实保存位置--><input type="text" style="visibility: hidden;border: 0;height: 0;width: 1px;padding: 0;margin: 0" name="password"id="password" placeholder="密码"><button type="submit" id="submit">提交</button></form><script src="login.js" type="text/javascript"></script></body></html>
js代码
var passwordDisc = document.getElementById("passwordDisc");var password = document.getElementById("password");// 键盘按下执行,主要用于删除操作passwordDisc.addEventListener("keydown", function (event) {// 后面事件会改变，所以先记录选择的文本坐标this.selectStartIndex = this.selectionStart;this.selectEndIndex = this.selectionEnd;if (event.key === 'Backspace') {// 如果是退格键if (this.selectionStart === this.selectionEnd) {// 未选择文本var str1 = password.value.substring(0, this.selectionStart - 1);var str2 = password.value.substring(this.selectionStart);password.value = str1 + str2;} else {// 选择了文本var str1 = password.value.substring(0, this.selectionStart);var str2 = password.value.substring(this.selectionEnd);password.value = str1 + str2;}} else if (event.key === 'Delete') {// 如果是删除键if (this.selectionStart === this.selectionEnd) {// 未选择文本var str1 = password.value.substring(0, this.selectionStart);var str2 = password.value.substring(this.selectionStart + 1);password.value = str1 + str2;} else {// 选择了文本var str1 = password.value.substring(0, this.selectionStart);var str2 = password.value.substring(this.selectionEnd);password.value = str1 + str2;}}});// 输入事件，保存密码passwordDisc.addEventListener("input", function (event) {if ((event.data || event.data != null || event.inputType === 'insertFromPaste') && event.inputType !== 'insertCompositionText') {// 输入有数据或者是粘贴操作，并且不是中文输入var data = event.data || event.data != null ? event.data : this.pasteString;// 除ascii里的都替换为空，避免粘贴有其他符号data = data.replace(/[^\x00-\x7e]/g, '');var str1 = password.value.substring(0, this.selectStartIndex);var str2 = password.value.substring(this.selectEndIndex);password.value = str1 + data + str2;}// 文本框密文显示passwordDisc.value = password.value.replace(/./g, '*');console.log(password.value);})// 获取粘贴板的文本数据passwordDisc.addEventListener("paste", function (event) {this.pasteString = event.clipboardData.getData('text/plain');})
结论
通过尝试是可行的，如果不想有人f12显示密码可以使用js代码保存而不是隐藏的文本框，而且这种方法基本上是支持所有浏览器。但是经过测试谷歌浏览器在对中文输入是会存在一个小bug，但不影响，我猜测是谷歌浏览器本身自带的bug，因为代码逻辑上是没有问题的。
