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

摘要:
一个常见需求,实时监听textarea的输入变化,并在页面上显示还能够输入多少字符。但实际检测,使用的是iPhone5s,版本为7.0的也能够正确监听到input事件。第二个错误更是经验主义错误,  $估计很多人会和我一样,看不出来错误在哪里?事实上,zepto包括jquery使用on绑定多个事件,中间是以空格分开的,而不是逗号。

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

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

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

1、仅仅使用onkeyup事件

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

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

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

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

免责声明:文章转载自《实时监听移动端输入框的变化》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Centos安装php php-fpm 以及 配置nginx前后端分离(model多对多)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

Java读取图片和EXIF信息

后台需要读取客户端上传的图像//上传图像的宽度intoriginalheight=originalImg。获取高度();无论是在Windows中直接查看上述代码还是图像,都会获得宽度大于高度的信息。使用上述代码,可以直接读取宽度和高度。该值不考虑图像翻转方向,而是读取图像的EXIF信息。...

Dapper系列之一:Dapper的入门(多表批量插入)

Dapper只是一个完全开源的代码文件。您可以在项目中的任何位置实现数据到对象ORM操作,其大小小,速度快。Dapper的优点:1。Dapper是一个轻量级ORM类。该代码是一个SQLMapper.cs文件,编译后通常约为40k dll;2.Dapper,快点,你为什么说得快?因为Dapper的速度接近IDataReader,所以列表的数据比DataTabl...

将txt、csv等文本文件导入Hive

将txt、csv等文本文件导入Hive目录将txt、csv等文本文件导入Hive00.数据在虚拟机外01.启动hadoop、hdfs02.将文件放置在hdfs目录下03.登录hive并进入指定数据库04.根据文件创建表05.执行导入语句00.数据在虚拟机外如果数据在虚拟机内,请跳过此步,直接执行接下来的操作。...

内网esxi磁盘空间不足导致虚拟机宕机

因为一些占用太多空间的虚拟机可能无法启动。我不断拍摄快照以保存测试版本。我跳过了同一网段上的一个虚拟机ssh,并一直看着翻译器学习如何释放虚拟磁盘空间。您只能创建一个新的虚拟机来读取原始磁盘目录,并且只能重新构建一个新Linux机器进行测试。然后上传一个测试文件(最大程度地模拟其他虚拟机环境)。首先,你需要关闭机器。厚配置延迟将整个虚拟机目录文件清零,如下所...

Corn表达式

CronTriggerCronTrigger通常比SimpleTrigger更有用。如果您需要基于日历的概念,而不是SimpleTrigger完全指定的时间间隔,则重复启动工作的时间表。CronTrigger,您可以指定触发器计划,例如“每周五中午”、“每工作日9:30”,甚至“每周一上午、周三和周五9:00和10:00每五分钟”。即使如此,就像Simple...

wxparse使用(富文本插件)

优点:唯一已知的可以将HTML转换为小程序识别的插件缺点:转换HTML标签可能需要大量的微信小程序标签和样式配置:步骤1,下载https://github.com/icindy/wxParse第二步:把它放到项目中。我选择页面目录。步骤3:配置wxml以添加:需要时使用:...