js监听文本框输入

转自 http://caibaojian.com/toutiao/4360, 原文 司徒正美

原理

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

  2. oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。

  3. onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)(仅 IE 支持)。

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

  5. 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);//处理粘贴
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 搜索 Eclipse常用快捷键 编辑 查看 窗口 导航 文本编辑 文件 项目 源代码 运行 重构 其他Eclips...
    CarlosLynn阅读 1,692评论 0 7
  • Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速...
    山不转人自转阅读 1,479评论 0 10
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • 1. PCB设计快捷键(单次按键) 单次按键是指按下该键并放开。 1-01 * 在PCB电气层之间切换(小键盘上的...
    SunShine__鹏阅读 2,775评论 1 3
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 919评论 0 1