监听文本框输入

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了监听文本框输入相关的知识,希望对你有一定的参考价值。

一、相关事件说明:

Firefox、Chrome、IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件。

oninput: 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)通过JS来改变value值,不会触发。

onpropertychange:事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)(仅 IE 支持)。通过JS来改变value值,触发。

backspace、delete: 两个按键的 keyCode 分别为 8、46。

oncut: 事件在粘贴(ctrl + v)、鼠标粘贴时触发。

 

var input = document.getElementById("test");
function fn() {
  // 你要执行的代码
}
 
if(window.addEventListener) { //先执行W3C
  input.addEventListener("input", fn, false);
} else {
  input.attachEvent("onpropertychange", fn);
 
}
 
if(window.VBArray && window.addEventListener) { //IE9
  input.attachEvent("onkeydown", function() {
    var key = window.event.keyCode;
    (key == 8 || key == 46) && fn();//处理回退与删除
 
  });
  input.attachEvent("oncut", fn);//处理粘贴
}

 

二、事件中的BUG

 描述:

  在进行输入框输入过滤时,发现了如果在IE中,元素绑定 onpropertychange事件,当元素value修改时,会导致堆栈溢出(stack overflow)

 代码:  

$element.on(‘propertychange‘, function(){
       var val = $.trim(this.value);
       this.value = val.replace(/[^\d\.]/g, ‘‘);
 })

 

 原因:

  堆栈问题的出现就意味着死循环(包括递归),死循环是如何出现的呢?

  这是因为IE onpropertychange事件的触发条件是:当绑定元素的值发生任何改变,而这个改变是没有条件,只要有改动就会去触发。而上代码,由于每次输入都会改变value的,改变value的就会触发onpropertychangeg事件,从而导致事件进入触发死循环。导致stack overflow的出现。

  为什么oninput事件功能与onpropertychange功能效果一样,为什么它不会出现这个问题?

  这是因为oninput事件在元素value发生改变时,进行条件设置,当使用js来动态改变value值时,是不会触发oninput事件(propertychanger却会)。从上代码来看,如果将propertychange换成input,则每一次输入不会导致事件重复触发。因为value的是通过js来进行改变,满足oninput不触发条件。

以上是关于监听文本框输入的主要内容,如果未能解决你的问题,请参考以下文章

input输入框内容变化实时监听

Vue - 监听文本框数据的三种方法

markdown JS监听文本框输入

JS实现移动端实时监听输入框变化的实例代码

监听文本框输入开发仿新浪微博限制输入字数的textarea插件

监听文本框输入