javascript 代码
- /**
- * 监测 input 元素输入变化
- * @param callback 变化时的回调函数
- * @param debounce 检测变化的延迟时间
- */
- input: function (callback, debounce) {
- var that = this,
- $document = $(document),
- event = 'oninput' in document.createElement('input') ? 'input' : 'propertychange';
- function handler() {
- var id = that.data('id');
- id !== undefined && clearTimeout(id);
- that.data('id', setTimeout(function () {
- callback();
- }, debounce !== undefined ? debounce : 200));
- }
- that.on(event, handler);
- /*
- IE9 删除内容时不会触发 input 和 propertychange 事件
- <!--[if IE 9]>
- <script>
- window.isIE9 = true;
- </script>
- <![endif]-->
- */
- /*window.isIE9 && that.on('focus', function () {
- $document.on('selectionchange', handler);
- }).on('blur', function () {
- $document.off('selectionchange');
- });*/
- /*
- IE9 删除内容, 剪切, 撤销时不会触发 input 和 propertychange 事件, 但撤销输入没有对应的事件, 无法处理
- <!--[if IE 9]>
- <script>
- window.isIE9 = true;
- </script>
- <![endif]-->
- */
- window.isIE9 && that.on('keydown', function (event) {
- // 按下退格, 删除键, 且删除前输入框有内容
- $.inArray(event.which, [8, 46]) !== -1 && that.val() && handler();
- }).on('cut', function () { // 剪切
- that.val() && handler();
- });http://www.qdfuns.com/feedback.php?mod=publish
- return that;
- }
在输入中文等需要输入法的语言时, 使用 input 事件监测输入会有一个问题, 那就是只要有输入但并没有按空格键时, 都会触发 input 事件. 如果需要真正地输入中文后再触发事件, 就需要用到 compositionstart 和 compositionend 事件. compositionupdate 类似 input 事件, 但还是有些不同.
html 代码
- <!DOCTYPE html>
- <html>
- <body>
- <input type="text">
- <script>
- document.querySelector('input').addEventListener('compositionend', function(){
- alert(this.value);
- });
- </script>
- </body>
- </html>
配合 jquery-placeholder 使用
javascript 代码
- /**
- * 监测 input 元素输入变化
- * @param callback 变化时的回调函数
- * @param debounce 检测变化的延迟时间
- */
- input: function (callback, debounce) {
- var that = this,
- lastValue = that.val(),
- imeLocked;
- function handler() {
- //setTimeout(xx,0) 是为了等所有事件都处理完了再来执行下列代码
- setTimeout(function () {
- var id;
- /**
- * jquery-placeholder 插件会动态修改 value 属性, 从而触发 propertychange 事件
- * 但其修改 value 属性时会加一些标识, 导致 that[0].value 和 that.val() 不一样
- * 如 placeholder 文本为'xxx',that[0].value 为'xxx', 但 that.val() 为空字符串
- */
- if (that.val() !== lastValue && !imeLocked) {
- lastValue = that.val();
- id = that.data('id');
- id !== undefined && clearTimeout(id);
- that.data('id', setTimeout(function () {
- callback();
- }, debounce !== undefined ? debounce : 200));
- }
- }, 0);
- }
- that.on(inputEventName, handler);
- /*
- IE9 删除内容, 剪切, 撤销时不会触发 input 和 propertychange 事件, 但撤销输入没有对应的事件, 无法处理
- <!--[if IE 9]>
- <script>
- window.isIE9 = true;
- </script>
- <![endif]-->
- */
- window.isIE9 && that.on('keydown', function (event) {
- // 按下退格, 删除键, 且删除前输入框有内容
- $.inArray(event.which, [8, 46]) !== -1 && that.val() && handler();
- // 搜狗浏览器在 ie9 兼容模式下有 bug, 输入框里按下回车键会触发回收站按钮的点击事件
- event.which === 13 && event.preventDefault();
- }).on('cut', function () { // 剪切
- that.val() && handler();
- });
- // 针对输入法的输入进行优化
- that.on('compositionstart', function () {
- imeLocked = true;
- }).on('compositionend', function () {
- imeLocked = false;
- });
- return that;
- }
来源: http://www.qdfuns.com/article/17631/da8b67da14087d380172224bc5831f78.html