猿问

js无法监听input值的变化，如何解决？

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>


    <input type="text" id="input" value="0">

    <span class="btn">+1</span>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <script>

        $(function(){

            /*改变input值*/

            $(".btn").on("click",function(){

                let new_value =  parseInt($("#input").val()) + 1;

                $("#input").val(new_value);

            });

            /*监听input值的变化*/

            $("#input").bind("input propertychange",function(){

                console.log($(this).val());

            });

        });

    </script>

    

</body>

</html>

如上代码，通过程序改变input值时，无法监听到input值的变化，请问该如何改进？

注意是通过js改变input值，而不是键盘输入。请勿在js改变input值的函数里触发数据监听函数，上述代码仅作示意

谢谢。


回首忆惘然
浏览 759回答 1
1回答

一只斗牛犬

用defineProperty吧<input type="text"&nbsp; id="aaa" value="1" /><button id="btn">add1</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var aaa =document.getElementById("aaa");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var btn =document.getElementById("btn");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var obj = {};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.onclick=function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(aaa.value){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.val = parseInt(aaa.value)+1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.val = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valcahnge(aaa,function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(aaa.value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function valcahnge(dom,fn){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Object.defineProperty(obj,'val',{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; get:function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this._val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set:function(val){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dom.value = val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fn();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this._value=val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答