js更改input文本框的value值,无法触发input的onChange,onInput事件,解决方案

本文介绍了一种通过Object.defineProperty监听DOM元素值变化的方法。利用这种方式可以实现在文本框值改变时触发相应事件,适用于需要实时响应输入变化的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在文章的开头,我们需要了解一下

change: 当元素的值发生改变、文本框失去焦点(无法实时更新)会触发 change 事件。

input: 当文本框的值发生改变、存在焦点时(实时更新),会触发 input事件。

那么什么样的环境会触发我们的标题行为呢?

<input id='inp'/>
<script>
var inp = document.getElementById('inp')
// 首先要了解的是  此时变更value值是无法触发change和input事件的
inp.value = '123'
</script>

这个时候我们想要在文本框变动时发生一系列操作,如变更其他文本框的值,发送ajax请求

这个时候我们就可以用到Object.defineProperty来监听这个元素,当dom元素的某个属性值发生变化时触发一系列的事件

<input id='inp'/>
<script>
var inp = document.getElementById('inp')
// 我们不能直接监听value属性,因为如果直接监听value属性
// 赋值时会造成死循环
// 在这里我监听的是newvalue
Object.defineProperty(inp, 'newvalue', {
 // configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
  configurable: true,
  set: function (newvalue) { // newvalue监听的属性表示变更的值
    this.value = newvalue // this代表绑定的dom元素.value 将newvalue赋给value
    // 下方触发事件,发起请求,做一系列想做的操作
    // ······
  },
  get: function () {
    return this.value
  },
})

// 这个时候我们不给value赋值  而是去给newvalue值赋值,从而实现事件的监听触发一系列事件
inp.newvalue=111
//这个时候value的值也会变成111 我们就可以在set方法内写入一系列的触发方法
</script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值