var vm = new Vue({
el: “#fix”,
data: {
val: [],
finaVal: ‘’,
// 输入框显示值
maskshow: “”,
// 判断是否掩码显示
flag: true,
str: “”,
// 存放真实值
vall: [],
// 最终值
finaVall: ‘’,
maskshowl: “”,
flagl: true,
strl: “”,
// 第一个掩码定时器
passtimer: undefined,
// 第一个控制定时器开关
passkey: false,
// 第e二个控制定时器开关
passkeyt: false,
// 第一个控制增加减少
add: false,
// 第二个掩码定时器
passtimert: undefined,
addt: false,
// 第一个输入框内容
newcontent: “”,
// 闭眼显示
eyeinnerclose: false,
// 第二个输入框内容
confirmcontent: “”,
// 闭眼显示
eyeinnerclose: false,
// 控制第一个×显示隐藏
entryfork: false,
// 路由取出token
passtoken: “”,
// 控制下一步高亮
nextlight: false
},
created: function () {
this.passtoken = this.getUrlParameter(“id”)
},
mounted:function(){
// this.aaa()
},
methods: {
eyeoclick: function () {
var _this = this
if (_this.flag == false) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲passwordo").foc…nextTick(function () {
_that.newcontent = _that.maskshow
})
_this.eyeinnerclose = false
_this.flag = true
} else {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲passwordo").foc…nextTick(function () {
that.newcontent = that.finaVal
})
_this.eyeinnerclose = true
_this.flag = false
}
},
newmethod: function () {
$("#passwordo").focus()
// 第一个一秒变掩码
let _this = this
// 正则验证
var newcontent = $("#passwordo").val()
_this.newcontent = newcontent.replace(/[\u4e00-\u9fa5]/gi, ‘’)
var val_l = _this.val.length
var l = _this.newcontent.length
if (val_l < l) {
_this.add = false
// 新内容
var newfont = _this.newcontent.substr(val_l)
_this.val = _this.val.concat(newfont.split(""))
} else if (val_l > l) {
_this.add = true
_this.val.splice(val_l - 1, 1);
}
_this.finaVal = _this.val.join(’’)
var flen = _this.finaVal.length
//定时器没执行过清除定时器
if (_this.flag) {
_this.str = ‘’
if (!_this.passkey) {
clearTimeout(this.passtimer)
if (l == 1) {
_this.str += _this.finaVal.charAt(flen - 1)
} else {
for (var i = 0; i < flen - 1; i++) {
_this.str += ‘•’
}
_this.str = _this.str + _this.finaVal.charAt(flen - 1)
}
_this.passkey = false
// $("#passwordo").val(str)
_this.newcontent = _this.str
} else {
// 定时器执行过变为false
_this.passkey = false
}
if (!_this.add) {
_this.passtimer = setTimeout(function () {
var that = _this
that.str = ‘’
for (var i = 0; i < flen; i++) {
that.str += ‘•’
}
that.maskshow = that.str
if (that.flag == true) {
that.newcontent = that.maskshow
}
_this.passkey = true
}, 1000)
} else {
var that = _this
that.str = ‘’
for (var i = 0; i < flen; i++) {
that.str += ‘•’
}
that.maskshow = that.str
_this.passkey = true
}
} else {
_this.str = ‘’
for (var i = 0; i < flen; i++) {
_this.str += ‘•’
}
_this.maskshow = _this.str
_this.newcontent = _this.val.join("")
}
// 一键删除显示隐藏
_this.$refs.forko.style.display = $("#passwordo").val() != "" ? 'block' : 'none' ;
_this.$refs.icon.style.display = $("#passwordo").val() != "" ? 'block' : 'none' ;
},
// 第二个一秒变掩码
confirmmethod: function () {
$("#passwordt").focus()
var _this = this
// 正则验证
var confirmcontent = $("#passwordt").val()
_this.confirmcontent = confirmcontent.replace(/[\u4e00-\u9fa5]/gi, '')
var val_l = _this.vall.length;
var l = _this.confirmcontent.length;
if (val_l < l) {
_this.addt = false
// 新内容
var newfont = _this.confirmcontent.substr(val_l)
_this.vall = _this.vall.concat(newfont.split(""))
} else if (val_l > l) {
_this.addt = true
_this.vall.splice(val_l - 1, 1);
}
_this.finaVall = _this.vall.join('')
var flen = _this.finaVall.length
//定时器没执行过清除定时器
if (_this.flagl) {
_this.strl = ''
if (!_this.passkeyt) {
clearTimeout(_this.passtimert)
if (l == 1) {
_this.strl += _this.finaVall.charAt(flen - 1)
} else {
for (var i = 0; i < flen - 1; i++) {
_this.strl += '•'
}
_this.strl += _this.finaVall.charAt(flen - 1)
}
// $("#passwordt").val(strl)
_this.passkeyt = false
_this.confirmcontent = _this.strl
} else {
_this.passkeyt = false
}
if (!_this.addt) {
_this.passtimert = setTimeout(function () {
var that = _this
that.strl = ''
for (var i = 0; i < l; i++) {
that.strl += '•'
}
that.maskshowl = that.strl
if (that.flagl == true) {
that.confirmcontent = that.maskshowl
}
_this.passkeyt = true
}, 1000)
} else {
var that = _this
that.str = ''
for (var i = 0; i < flen; i++) {
that.str += '•'
}
that.maskshowl = that.strl
_this.passkeyt = true
}
} else {
_this.strl = ''
for (var i = 0; i < flen; i++) {
_this.strl += '•'
}
_this.maskshowl = _this.strl
_this.confirmcontent = _this.vall.join("")
}
// 一键删除显示隐藏
this.$refs.forkt.style.display=$("#passwordt").val() != "" ? 'block' : 'none';
this.$refs.icont.style.display=$("#passwordt").val() != "" ? 'block' : 'none';
},
// 一键清除内容 清除定时器
forkomethod: function () {
clearTimeout(this.passtimer)
this.newcontent=""
this.val = []
this.finaVal = ''
this.maskshow = ""
this.str = ""
},
forktmethod: function () {
clearTimeout(this.passtimert)
this.confirmcontent=""
this.vall = []
this.finaVall = ''
this.maskshowl = ""
this.strl = ""
},
// 下一步提交
next: function () {
if ($("#passwordo").val() != "" && $("#passwordt") != "") {
var valn = this.finaVal
var valr = this.finaVall
if (/\d/g.test(valn) && /[a-z]/gi.test(valn) && /\d/g.test(valr) && /[a-z]/gi.test(valr)) {
console.log(1111)
if (valn.length >= 8 && valn.length <= 16 && valr.length >= 8 && valr.length <= 16 && valn == valr) {
// 符合规则
this.getData(this.finaVal)
} else {
if (valn != valr) {
var modal = new Toast({
id: "my-id",
text: "两次密码输入不一致",//必填
})
} else {
var modal = new Toast({
id: "my-id",
text: "密码不符合规则",//必填
})
}
}
} else {
var modal = new Toast({
id: "my-id",
text: "密码不符合规则",//必填
})
}
// 密码不一致
if (valn != valr) {
var modal = new Toast({
id: "my-id",
text: "两次密码输入不一致",//必填
})
}
}
},
// 获取url参数函数
getUrlParameter: function (paramName) {
var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)", "i"),
arr = window.location.search.substr(1).match(reg);
if (arr) {
return arr[2];
}
return null;
},
// 封装请求函数
getData: function (password) {
var _this = this;
var url = "/reqxml?action=40070&path=/qqt/mc/qqt_public_api&funcId=790020&rsttoken=" + this.passtoken + "&password=" + password;
ajax.run(url, "", function (oData) {
base.log(oData);
var data = JSON.parse(oData.BINDATA)
if (data.code == 0) {
// 下一步变暗
_this.nextligh = false
var modal = new Toast({
id: "my-id",
text: "设置成功"//必填
})
setTimeout(function () {
base.href('http://action:3413');
}, 2000);
} else {
var modal = new Toast({
id: "my-id",
text: data.msg,//必填
})
}
});
},
// 第一个输入框控制光标只能在最后一位
lastlinko: function (item) {
$("#passwordo").focus()
var oTxt1 = document.getElementById("passwordo")
oTxt1.selectionStart = oTxt1.value.length
oTxt1.selectionEnd = oTxt1.value.length
},
// 第二个
lastlinkt: function () {
$("#passwordt").focus()
var oTxt1 = document.getElementById("passwordt")
oTxt1.selectionStart = oTxt1.value.length
oTxt1.selectionEnd = oTxt1.value.length
},
},
watch: {
// 第一个输入框控制确认高亮显示
newcontent: function () {
if ($("#passwordo").val() != "" && $("#passwordt").val() != "") {
this.nextlight = true
} else {
this.nextlight = false
}
},
// 第二个输入框控制确认高亮显示
confirmcontent: function () {
if ($("#passwordo").val() != "" && $("#passwordt").val() != "") {
this.nextlight = true
} else {
this.nextlight = false
}
}
},
filters: {
}
});
// 获取焦点
$("#passwordo").on("focus", function () {
if ($("#passwordo").val()) {
$(".forkinnero").show()
}
})
$("#passwordt").on("focus", function () {
if ($("#passwordt").val()) {
$(".forkinnert").show()
}
})
// 失去焦点 一键删除隐藏
$("#passwordo").on("blur", function () {
$(".forkinnero").hide()
})
$("#passwordt").on("blur", function () {
$(".forkinnert").hide()
})
});
在input输入框上面覆盖div,添加点击事件获取焦点,阻止获取中间光标,input只能在最后以后添加内容,查询获取光标边界。