IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    js监听input、textarea等表单输入框内容变化事件

    phpvar发表于 2016-08-16 10:05:04
    love 0

    如果你在实现“统计input、textarea文本框输入字数”中遇到问题,阅读本文或许可以帮助你解决这个棘手的问题!

    手机页面开发,要统计textareal文本框输入字数,使用onkeyup虽然可以监听到输入框的文本字数变化,但在iphone下有个问题:拼音输入法,在输入汉字拼音还没上屏的状态下,js的onkeyup事件会把拼音的字母个数当成上屏字数统计啦。直接的影响是文本框输入字数统计显示错误! 

    示例代码:


    10字

    js监听input、textarea等表单输入框内容变化事件: 

    1、oninput事件与onpropertychange事件的区别:

    oninput事件是现代浏览器(ie8及以下的ie低版本浏览器除外)的事件,只在value值改变时实时触发,但是通过js改变value时不会触发,通过addEventListener()来注册事件;onpropertychange事件是IE专有事件,在任何属性改变时都会触发,通过attachEvent()来注册事件。(当输入框设置为disable=true后,oninput/onpropertychange都不会触发)

     

    2、onchange事件与onpropertychange事件的区别:

    onchange事件在内容改变且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有!

     

    3、事件的依次执行先后顺序:

    onKeydown onkeypress oninput onpropertychange onkeyup onchange(部分事件,不同浏览器下会不执行,看上面解析)

     

    明白上述事件的本质区别,如果页面上的输入框输入字数统计这一功能要在pc & 移动端都要正常使用,可以直接把上述示例代码改成: 


    10字

    即把监听input、textarea等表单输入框内容变化的oninput事件加上即可解决iphone输入框字数统计错误的问题,做到功能全兼容! 

    参考链接:

    iOS 9 - keyup event not firing

    On input change event?

    GlobalEventHandlers.oninput

    input标签内容改变的触发事件



沪ICP备19023445号-2号
友情链接