实时监听移动端输入框的变化
2017-04-07 17:23
726 查看
一个常见需求,实时监听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(); }); })
相关文章推荐
- JS实现移动端实时监听输入框变化的实例代码
- 移动端实时监听输入框变化
- oninput & onpropertychange实时监听输入框的变化 && ie8堆栈溢出
- 关于实时监听输入框的值变化
- H5:实时监听 input 输入框的值变化
- 移动端keyup事件 ios端 输入框实时变化
- 即时搜索或input实时检测监听输入框变化
- input输入框内容变化实时监听
- 实时监听输入框的值变化的时候,做相应处理
- jQuery实时监听输入框字符变化的方法
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- jquery实时监听输入框值变化
- [置顶] 如何实时监听输入框的值?
- jquery实时监听输入框值变化
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- 实时监听输入框值变化的完美方案:oninput & onpropertychange(真正完美,支持ie9以下,ie10,chrome)
- js实时监听输入框的值
- jquery实时监听输入框值变化
- Android 通过注册广播,实时监听网络连接与断开状态的变化
- 关于中文输入法下 输入框的实时监听 校验