html 选择自动增加行数,HTML怎么自动计算出上两行的值在第三行里面?

如果使用原生js的话,需要做的工作就稍微有点多了。一步一步来吧。

第一点;首先要明确需要绑定什么事件。实时监听的话,给input绑定change事件是不行的。绑定的change事件如果我没记错的话需要在input失去焦点生效。因此这个时候,我们需要绑定一个叫做input的事件来完成实时监听,但是,在IE9以下,input事件不支持,而支持的是另外一个叫做propertychange的事件。

第二点:事件绑定在大多数浏览器是支持的addEventListener,但低版本IE仅支持的是attachEvent,因此需要一个事件绑定的兼容处理。

function addEvent(elem, eventtype, handler) {

elem.addEventListener ? addEventListener(eventtype, handler, false) : elem.attachEvent('on' + eventtype, handler);

}

第三点:又因为获取元素的方式querySelector与getElementByClassName都有兼容性问题,因此选择getElementById来获取元素。

完整代码如下!

var input_1 = document.getElementById('input_1');

var input_2 = document.getElementById('input_2');

var result = document.getElementById('result');

function changeHandler() {

var value_1 = parseInt(input_1.value || 0);

var value_2 = parseInt(input_2.value || 0);

result.value = value_1 + value_2;

}

function addEvent(elem, eventtype, handler) {

elem.addEventListener ? addEventListener(eventtype, handler, false) : elem.attachEvent('on' + eventtype, handler);

}

// input IE9一下不支持,因此需要额外绑定一个

['input', 'propertychange'].forEach(function(event) {

addEvent(input_1, event, changeHandler);

addEvent(input_2, event, changeHandler);

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值