如上图所示,今天实现了一个功能,功能需求如下:
(1)在input中输入文字,文字被jquery监控,实时显示在文本框下面的文字中。
(2)点击“兑换全部点数”按钮,自动将用户全部点数的数值录入到文本框中,并在下方的文字中实时显示出来。
这个功能做起来还是很简单的,需要掌握几个知识点:
第一:如何监控input文本框:
监控input文本框的内容,需要使用bind()来绑定 onpropertychange和oninput两个属性来进行:
-
onpropertychange: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。
-
oninput:是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
-
onchange: (a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);(b)当前对象失去焦点(onblur);
$('.input_cp').bind("input propertychange",function(event){
});
并且在函数体中设置一下