禁止自动填充方案
readonly οnfοcus="this.removeAttribute('readonly')"
这方案亲测有效，简单直接，把上面代码直接复制放到input标签就上就行。
ps:现有的网上多数加隐藏input获取值，都是解决默认填充的，而剩下的方案都是只能实现部分功能。
但是这个方案 如果使用password还是会引起浏览器提醒是否保存密码，并不能禁用缓存，只能不自动把账号密码填充进去。
为了，当type="password"的时候，做了以下测试：
动态设置，初始化为了text,输入之后变为password。失败：在谷歌上，只要设置过password这个input就能引起浏览器反应(出现钥匙的标签，继而提交的时候弹出提示)。
因为是input为空的时候，钥匙会消失。输入值就会出现，并且js操作的值和初始化值的不会出现钥匙，所以能不能把这个动作禁止了，浏览器接受不到就不出现。按照DOM事件的思路，禁用了input的所有事件的冒泡，默认事件，无效。失败：完全不知道浏览器是怎么触发得。
继而放弃禁止出现钥匙，那么表单提交动作浏览器能不能禁止，一堆操作禁止，失败：同2一样浏览器并不是在事件机制接受到的触发，或者是在我们事件机制之前？不得而知
至此，原生的passwraod已经没有思路来解决这个问题(如果有请留言，作者尝试后更新文章)，那么我们就来打造了一个password。
首先，什么都不说，直接上解决方案。
第一步：引入js
; (function (name, definition) {
if (typeof define === 'function') {
define(definition)
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = definition()
} else {
this[name] = definition()
}
})('Text2Password', function () {
function Text2Password(opts) {
let { id, callback = () => { } } = opts, input = document.getElementById(id), _this = this;
_this._value = [], _this.input = input, _this.callback = callback;
input.addEventListener("copy", Text2Password.preventDefault)
input.addEventListener("cut", Text2Password.preventDefault)
input.addEventListener("paste", Text2Password.preventDefault)
input.addEventListener("input", _this.passwordHandler.bind(_this))
this.init();
Object.defineProperty(_this, "value", {
get: function () {
return _this._value.join("")
},
})
return this
}
Text2Password.preventDefault = function (e) {
var e = e || window.event;
e.preventDefault();
}
Text2Password.prototype.init=function(){
this.input.value.split("").forEach(function(value){
this._value.push(value)
}.bind(this))
this.input.value = new Array(this._value.length).fill("*").join("");
}
Text2Password.prototype.passwordHandler = function () {
var cursor = this.input.selectionStart, cvalue = this.input.value.split(''), ovalue = this._value;
var changeLen = cvalue.length - ovalue.length;
if (changeLen > 0) {
// changeLen 如果是正数 说明新数据的长度比旧数据长 所以曾嘉乐数据
ovalue.splice(cursor - 1, 0, ...cvalue.slice(cursor - 1, cursor - 1 + changeLen))
}
if (changeLen < 0) {
// 删除某些元素
ovalue.splice(cursor, Math.abs(changeLen))
}
cvalue.forEach(function (value, index) {
if (value != "*") {
ovalue[index] = value;
}
})
this.input.value = new Array(cvalue.length).fill("*").join("");
this.input.selectionStart = cursor;
this.input.selectionEnd = cursor;
typeof this.callback == "function" && this.callback();
}
return Text2Password
})
第二步：初始化。
第一：注意我们这个input的type是text，但是会转化为跟password一样的表现。
第二：因为是单对单，所以只支持传入id
第三：获取input的value，需要通过password.value.或者通过callback设置隐藏input的值直接提交表单。
var password = new Text2Password({
id: "password",
callback: function () {
console.log(this.value)
}
});
password.value //
已实现功能：input内容显示为*(目前没设置传参，如果需要直接代码中修改)，并且直接通过dom获取也是*,突然感觉信息好像安全了很多。
禁止复制粘贴剪切。
可以在任意位置增删或者选中替换。
end，如果有更好的方法，或者上述代码有bug，请留言一起交流。
