JS改变input的value值不触发onchange事件解决方案(超简版)

原文:https://blog.csdn.net/yuwq123/article/details/70655199 

监听js改变input的值触发的onchange事件

 $("#inpstart").attr("value",$("#inpend")[0].value);

当 我们像上面这样给一个input赋值时,由于onchange时间对input框不起作用,大家首先会想到使用  oninput事件,

然而oninput是需要用户手动输入,先获取焦点改变了值后失去焦点才触发,所以没卵用,

大多数论坛上多是说 onpropertychange 替代 change可以解决,然而兼容性不怎么样,之后就是自己做一个change什么的,感觉一个简单的事情这么难做

最后吧,咱换个思路,在js给input赋值的时候就给  一个  $("#inpstart").trigger("input"); 

然后再监听它的input事件 

$("#inpstart").bind("input propertychange",function () {
                    console.log("已经输入了"+$("#inpstart").val().length+"个字。。。");
                });

当然,我们可以在赋值的时候做判断,前后值不一样才trigger。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个示例代码: HTML部分: ``` <select id="mySelect" onchange="changeInput()"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <div id="inputContainer"> <input type="text" id="myInput" value="Input"> </div> ``` JS部分: ``` function changeInput() { var selectValue = document.getElementById("mySelect").value; var inputContainer = document.getElementById("inputContainer"); if (selectValue === "option1") { inputContainer.innerHTML = '<input type="text" id="myInput" value="Option 1">'; } else if (selectValue === "option2") { inputContainer.innerHTML = '<select id="myInput"><option value="option1">Option 1</option><option value="option2" selected>Option 2</option><option value="option3">Option 3</option></select>'; } else if (selectValue === "option3") { inputContainer.innerHTML = '<select id="myInput"><option value="option1">Option 1</option><option value="option2">Option 2</option><option value="option3" selected>Option 3</option></select>'; } } ``` 在这个例子中,我们使用了一个名为 `changeInput()` 的函数来检测 `select` 元素的,并根据更改 `input` 元素的类型。在这种情况下,如果选项1被选中,我们将 `input` 元素更改为文本输入框,如果选项2或3被选中,我们将 `input` 元素更改为下拉框。我们使用 `innerHTML` 属性来更改 `inputContainer` 元素的内容,从而更改 `input` 元素的类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值