1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

跨浏览器监听用户输入

作者:用户 来源:互联网 时间:2016-01-15 14:05:16

输入框监听事件functiontextbox键盘监听事件监听监听输入textchanged事件软件盘按键监听textchange监听js事件输入框div限制字数html标签counter

跨浏览器监听用户输入 - 摘要: 本文讲的是跨浏览器监听用户输入,  在前端的开发中,我们经常面临着这样的需求,需要统计在input[type=text]或者textarea中用户输入的字数,以便给用户一些输入限制的提示,

 在前端的开发中,我们经常面临着这样的需求,需要统计在input[type=text]或者textarea中用户输入的字数,以便给用户一些输入限制的提示,那么我们如何实现跨浏览器的监听用户在文本框的输入呢?

比如我们有如下的html结构,需要将用户在#textbox中输入的字数显示在#counter中:

<textarea id="textbox"></textarea>
<div id="counter">0</div>

先让我们看一下都有哪些方法可以监听用户的输入?

change事件

var $counter = $('#counter');
$('#textbox').on('change', function() {
$counter.text($(this).val().length);
});

chang事件是表单元素非常常用的一个事件了,被用来监听表单元素值的变化,但是在input[type=text]textarea中监听用户输入,却有一个很大的限制,那就是它只有在焦点离开文本框的时候,才会触发,可是这样的用户体验并不能称之为好,我们往往需要的是实时监听。

keydown事件/keyup事件

var $counter = $('#counter');
$('#textbox').on('keydown', function() {
$counter.text($(this).val().length);
});

keydown事件和keyup事件差不多,都是监听用户在键盘按键的事件,区别在于前者在按下时触发,后者在抬起时触发,对于我们的应用场景,显然keydown的体验要好些。但是它的问题在于不能监听到用户所有的输入方式,比如在文本框点击鼠标右键弹出菜单的剪贴,删除,撤销选项。

input事件/propertychange事件

var $counter = $('#counter');
$('#textbox').on('input', function() {
$counter.text($(this).val().length);
});

input事件是HTML5新增加的事件,用于监听用户输入,它可以完美的监听到用户按键输入或者右键菜单的操作,但是同样的它并不支持IE8及其以下版本,但是在IE的低版本中我们可以通过监听propertychange事件达到同样的效果,代码如下:

var $counter = $('#counter');
$('#textbox').on('propertychange', function() {
window.event.propertyName === 'value' && $counter.text($(this).val().length);
});

以为两个事件都监听就完事大吉了,不幸的是,IE9虽然两个事件都支持,但是却同样有一个Bug,无法监听到任何文字减少相关输入的操作,包括按退格键,选中一段文字按delete键或者右键菜单删除,选中一段文字Ctrl+X剪切或者右键菜单剪贴,Ctrl+Z撤销刚才的输入或者右键菜单撤销,我就这个问题,还去知乎提问过,当时觉得可能除了设置定时器循环查看,也没有什么好的办法了,前一阵子在stackoverfollow偶然看到了这个问题的解决办法,现在将兼容IE9监听用户输入的方案分享在这里:

var $textbox = $('#textbox');
var $counter = $('#counter');
$textbox.on('input', textChange).on('focus', function() {
document.addEventListener('selectionchange', textChange);
}).on('blur', function() {
document.removeEventListener('selectionchange', textChange);
});
function textChange() {
$counter.text($textbox.val().length);
}

在IE9中删除文字会触发document的selectionchange事件,对此监听就相当于监听了删除文字相关操作的事件。

兼容方案

最后的兼容代码如下:

var $counter = $('#counter');
var $textbox = $('#textbox');
var textChange = function() {
$counter.text($textbox.val().length);
}
var _IE = (function() {
var v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : false;
})();

if (_IE && _IE < 9) {
$textbox.on('propertychange', function() {
window.event.propertyName === 'value' && textChange();
});
} else {
$textbox.on('input', textChange);
if (_IE === 9) {
$textbox.on('focus', function() {
document.addEventListener('selectionchange', textChange);
}).on('blur', function() {
document.removeEventListener('selectionchange', textChange);
});
}
}


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索输入框监听 , 事件 , function , textbox , 键盘监听 , 事件监听 , 监听 , 输入 , textchanged事件 , 软件盘按键监听 , textchange , 监听js事件输入框 , div限制字数html标签 counter js监听浏览器窗口变化、js监听浏览器后退事件、监听浏览器关闭事件、js监听浏览器关闭事件、监听浏览器后退事件,以便于您获取更多的相关知识。

漏洞 跨站点脚本编制

...t; 推理: 测试在响应中成功嵌入脚本,并且一旦在用户浏览器中加载页面,就会执行此脚本。这意 味着应用程序易受到跨站点脚本编制攻击

js监听表单value的修改同步问题,跨浏览器支持_表单特效

...好使。然而,这个事件是IE专有的。WEB开发,必须得考虑浏览器的兼容问题。于是继续摸索…… 在网上有看到了另外一个事件:oninput。网上到处都是:fireFox中的该事件与IE中onpropertychange的事件等同。然而,我一试,发现根本不...

前端跨域整理

...用外部文件,不同标签下的页面引用类似的彼此的文件,浏览器很容易懵逼的,安全也得不到保障了就。什么事,都是安全第一嘛。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使...

Web很脆弱,SQL注入要了解

...(例如JavaScript),当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的,比如获取用户的Cookie,导航到恶意网站,携带木马等。 XSS攻击场景有以下两个方面: 1. Dom-Based XSS 漏洞。攻击过程如下 Tom 发现...

JavaScript学习笔记(12)

...泡阶段,对事件作出响应 2 事件处理程序事件是用户或浏览器自身执行的某种动作(例如,单击:click,加载:load)。 事件处理程序是响应具体事件的函数(例如,单击处理事件:onclick)。 2.1 HTML事件处理程序所谓HTML事件处...

前三篇
后三篇