javascript - 如何监测js控制input值改变的事件
本文介绍了javascript - 如何监测js控制input值改变的事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
遇到一个问题，代码如下：
<style>
#spSub, #spAdd, #inputDiv {
display: inline-block;
}
input {
}
</style>
<body>
<div id="spSub" class="shopcart-add">
<span class="glyphicon glyphicon-minus-sign"></span>
</div>
<div id="inputDiv">
<input type="tel" id="buyNum" class="form-control" style="width:60px" value="1" />
</div>
<div id="spAdd" class="shopcart-minus">
<span class="glyphicon glyphicon-plus-sign"></span>
</div>
<script>
$(document).ready(function () {
localStorage.getItem('#buyNum');
var buyNums = $("#buyNum").val();
var cNum = localStorage.getItem('#buyNum');
if (buyNums == null || buyNums.length == 0 || buyNums == 'null' || buyNums == '' || buyNums == 1) {
if (cNum == null || cNum == 'null' || cNum == '') {
$("#buyNum").val(1);
} else {
$("#buyNum").val(localStorage.getItem('#buyNum'));
};
};
$("#buyNum").bind('input propertychange', function () {
var changeNum = $("#buyNum").val();
if (changeNum != localStorage.getItem('#buyNum')) {
localStorage.setItem('#buyNum', changeNum);
alert(changeNum);
};
});
$("#spAdd").bind("click", function () {
$("#buyNum").val(parseInt($("#buyNum").val()) + 1)
});
$("#spSub").bind("click", function () {
var num = parseInt($("#buyNum").val()) - 1;
if (num > 0) {
$("#buyNum").val(parseInt($("#buyNum").val()) - 1)
}
});
});
</script>
</body>
oninput和onpropertychange在改变input的value时确实起作用了，但是在js控制加减按钮改变input的value的时候，没法监测到input的value值发生改变。
请问：有什么办法能监测到js改变value值吗？
解决方案
换了个思路，功能已实现，代码如下：
<script>
var localNum = localStorage.getItem('#buyNum');
window.onload = function () {
if(localNum == null || localNum == '' || localNum == 'null' || localNum.length == 0 || localNum == undefined || localNum == 'undefined'){
var num = new Num(1)
}else{
var num = new Num(localNum)
}
num.initFn()
}
var Num = function (init) {
this.init = init
}
// 初始化
Num.prototype.initFn = function () {
var _this = this
this.showNum(this.init)
document.querySelector('#spSub').addEventListener('click', function() {
_this.prevClick()
})
document.querySelector('#spAdd').addEventListener('click', function() {
_this.nextClick()
})
document.querySelector('#buyNum').addEventListener('input', function(e) {
_this.inputBind(e)
})
}
// 显示数字
Num.prototype.showNum = function (val) {
document.querySelector('#buyNum').value = val
}
// - 按钮
Num.prototype.prevClick = function () {
if (this.init > 0) {
this.init--
if(this.init != localStorage.getItem('#buyNum')){
localStorage.setItem('#buyNum', this.init);
};
}
this.showNum(this.init)
}
// + 按钮
Num.prototype.nextClick = function () {
this.init++
if(this.init != localStorage.getItem('#buyNum')){
localStorage.setItem('#buyNum', this.init);
};
this.showNum(this.init)
}
// input 值绑定
Num.prototype.inputBind = function (e) {
var num = e.target.value
var input = document.querySelector('#buyNum')
if (num === '' || num === null) {
input.value = this.init
return false
}else{
input.value = input.value
localStorage.setItem('#buyNum', input.value);
}
var reg = /^[0-9]*$/
if (!reg.test(num)) {
input.value = this.init
return false
}
}
</script>
有兴趣的可以跑代码试试，不要说什么插件之类的，自己引入jq和bootstrap，加上问题中的style和body代码，代码有些繁琐，因为要做本地存储。
这篇关于javascript - 如何监测js控制input值改变的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
