禁止自动填充方案

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，请留言一起交流。