实时监听移动端输入框的变化

Posted 烛火星光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实时监听移动端输入框的变化相关的知识,希望对你有一定的参考价值。

一个常见需求,实时监听textarea的输入变化,并在页面上显示还能够输入多少字符。

开发过程中翻了两个形式错误:

1、仅仅使用onkeyup事件

2、使用zepto绑定事件的时候,经验主义错误

 

 

第三方输入法在输入拼音的时候,并没有把输入的汉字直接写在输入框内,而是在输入法上方暂存,只有选择了字后才填到textarea输入框中,这时候是兼听不到键盘事件的,所以完全依赖keyup事件,是没办法准确获取所输入的字符数的,所以只能监听其他事件,html5新增事件oninput完美解决这一bug,但是当我检查其兼容性时,http://caniuse.com/#search=oninput 给出的兼容性列表是:

ios版本最低只兼容到9.3, android 4.4就有点悲催了。

但实际检测,使用的是iPhone5s,版本为7.0的也能够正确监听到input事件。

第二个错误更是经验主义错误,

  $(function () {
      var wordCount = 0,
        totalCount = 20,
        remaining = totalCount - wordCount;
        $(\'#overage\').text(remaining);
      $(\'textarea\').on(\'input, focus, keyup\', function (ev) {
        wordCount = $.trim($(this).val()).length;
        remaining = totalCount - wordCount;
        if (remaining <= 0) {
          $(this).val($(this).val().slice(0, totalCount));
          $(\'#overage\').text(0);
        } else {
          $(\'#overage\').text(remaining);
        }
        ev.stopPropagation();
      });
    })

  估计很多人会和我一样,看不出来错误在哪里?

事实上,zepto包括jquery使用on绑定多个事件,中间是以空格分开的,而不是逗号。

  $(function () {
      var wordCount = 0,
        totalCount = 20,
        remaining = totalCount - wordCount;
        $(\'#overage\').text(remaining);
      $(\'textarea\').on(\'input focus keyup\', function (ev) {
        wordCount = $.trim($(this).val()).length;
        remaining = totalCount - wordCount;
        if (remaining <= 0) {
          $(this).val($(this).val().slice(0, totalCount));
          $(\'#overage\').text(0);
        } else {
          $(\'#overage\').text(remaining);
        }
        ev.stopPropagation();
      });
    })

  

 

以上是关于实时监听移动端输入框的变化的主要内容,如果未能解决你的问题,请参考以下文章

如何实时监听 input 和 textarea输入框值的变化

input输入框内容变化实时监听

javascript --- 实时监听输入框值的变化

移动端 input输入实时监听查询数据渲染

移动端用js与jquery实时监听输入框值的改动

jquery 实时监听输入框值变化的完美方案