input实时监听value change

时间:2024-07-07 00:04:56

要即时的监听输入框(input,textarea)内容的变化,有一下几种方法

keydown,keypress,keyup事件   这些事件监听不了右键的复制,剪切和粘贴这些操作,在某些版本的浏览器中也会失效

change事件           1. 当对象属性改变,并且是键盘或者鼠标激发的,脚本触发无效
                2. 当对象失去焦点(onblur)触发,且内容必须发生改变,若先改变再还原,则失焦时不触发

input和propertychange事件    input是HTML5标准事件,在输入框的内容变化后立即触发,oninput能兼容到IE9.
               propertychange是IE专属的事件,对象属性发生改变时触发

               oninput限制:  1. js改变value时,不触发
                        2. select选取值,不触发
               onpropertychange限制: input为disable=true时,不触发

Bug
oninput和onpropertychange这两个事件在IE9中有个Bug,就是通过右键菜单的
剪切和删除命令删除内容时候不会触发,其他IE版本正常,目前无更好的方案。

onpropertychange在IE中,若用domObj.className="xx"来修改输入框的样式,
会导致IE下会有输入第一个字符的时候onpropertychange不触发的bug,因此要用
domObj.style.color="xx"来设置。