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);

})

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

html 选择自动增加行数,为网页中的源代码自动设置行号
本文演示了如何为网页中的源代码块自动设置行号. 现在,我们准备在网页中显示C++的Hello world.这段著名的代码如下所示: #include intmain() { std::cout < ...
java行数可变的表格,怎么在表格中自动增加行，并对输入的数据作判断
当前位置:我的异常网» Java Web开发 » 怎么在表格中自动增加行,并对输入的数据作判断怎么在表格中自动增加行,并对输入的数据作判断 www.myexceptions.net 网友分享于:2 ...
WPF中自动增加行（动画）的TextBox
WPF中自动增加行(动画)的TextBox 原文:WPF中自动增加行(动画)的TextBox WPF中自动增加行(动画)的TextBox WPF中的Textbox控件是可以自动换行的,只要设置Text ...
关于datagridview自动增加行高度和显示全部内容的设置
this.dataGridView1.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.AllCellsExceptHeaders; //自动调动dat ...
html标签table自动增加行,给表格添加行的标签
表格标签如何添加一个新的? 加了个新数据,但是标签一直不知道怎么添加1个和其他一样的从Windows的"开始"菜单里,找到excle2010,或者右键新建一个excel文档. 单 ...
gridControl自动增加行添加数据
绑定gridControl的对象list,(opList为ord_plantofo_view的list:) gridControl1.DataSource = new BindingList<o ...
表格(增加行号) http://www.blogjava.net/zeyuphoenix/archive/2010/04/19/318788.html
表格(增加行号) 前面介绍了关于JTable的基本使用.JTable单元格的Renderer和Editor.JTable的单元格的合并和拆分.JTableHeader的Renderer和Editor. ...
pandas删除行删除列，增加行增加列
举例:创建一个新df: df = pd.DataFrame(np.arange(16).reshape(4, 4), columns=list('ABCD'), index=list('1234')) ...
python pandas 增加一列_pandas删除行删除列增加行增加列的实现
创建df: >>> df = pd.DataFrame(np.arange(16).reshape(4, 4), columns=list('ABCD'), index=list(' ...

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

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

最新文章

热门文章