首页 > 代码库 > 实时监听移动端输入框的变化
实时监听移动端输入框的变化
一个常见需求，实时监听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();
});
})
实时监听移动端输入框的变化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。