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" id="aaa" value="1" /><button id="btn">add1</button> var aaa =document.getElementById("aaa"); var btn =document.getElementById("btn"); var obj = {}; btn.onclick=function(){ if(aaa.value){ obj.val = parseInt(aaa.value)+1; }else{ obj.val = 1; } } valcahnge(aaa,function(){ console.log(aaa.value); }); function valcahnge(dom,fn){ Object.defineProperty(obj,'val',{ get:function(){ return this._val; }, set:function(val){ dom.value = val; fn(); this._value=val; } }); }
随时随地看视频慕课网APP
相关分类
JavaScript