如何监测js控制input值改变的事件

发布于
2017-08-24

遇到一个问题，代码如下：

<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值吗？

javascript

阅读 9.8k

8 个回答

得票最新

JuddT

9921319

发布于
2017-08-24

✓ 已被采纳

换了个思路，功能已实现，代码如下：

<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代码，代码有些繁琐，因为要做本地存储。

supreme

2.3k12465

发布于
2017-08-24

更新于
2017-08-24

oninput OnPropChanged

Fvison

23615

发布于
2017-08-24

更新于
2017-08-24

jq change()就是做这个使的哦
http://www.w3school.com.cn/jq...

<div id="inputDiv">
    <input type="tel" id="buyNum" data-oldval="0" class="form-control" style="width:60px" value="1" />
</div>

<script>
    
        $("#spAdd").bind("click", function () { 
            $("#buyNum").val(parseInt($("#buyNum").val()) + 1);
            var nowVal = $("#buyNum").val();
            if(nowVal !== $("#buyNum").data("oldval")) {
                发生变化function
            }
            $("#buyNum").data("oldval"，nowVal);
        });
        $("#spSub").bind("click", function () { 
            var num = parseInt($("#buyNum").val()) - 1; 
            if (num > 0) {
                $("#buyNum").val(parseInt($("#buyNum").val()) - 1)
                 var nowVal = $("#buyNum").val();
                 if(nowVal !== $("#buyNum").data("oldval")) {
                 发生变化function
                 }
                 $("#buyNum").data("oldval"，nowVal);
            }
            
        });
        
        思路就是用一个data-oldval来存储原始值，他的赋值始终在操作对比后执行