// 用Jquery实现:

$('#input-element').on('input',()=>{
  console.log("你按了一下111");
})

// 用Jquery的事件委托实现:

$("body").delegate( $("#input-element"), "propertychange input", function () {

//  do something
console.log("你按了一下222");
});
 // propertychange input 是关键
 
 
// 用原生js实现:
let inputElem = document.getElementById("input-element");
inputElem.oninput = function(){
  console.log("你按了一下");
}
 
// 用原生js的事件委托实现:

document.oninput = function(e){

  if (e.target.id === "input-element") {  // 也可以用其他判断方法

    console.log("你按了一下");

  }
}

监听input实时输入的更多相关文章

  1. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  2. 通过定时监听input框来实现onkeyup事件-

    问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...

  3. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  4. valuechange(动态的监听input,textarea)

    valuechange(动态的监听input,textarea)之前值,之后值的变化 jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 ...

  5. 微信小程序监听input输入并取值

    小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...

  6. js监听input输入框值的实时变化实例

    情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...

  7. 时时监听input内容的改变

    心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...

  8. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  9. 监听 input上传文件, 获取文件名称,

    <div class="import-box pr" > <span class="model-address-txt">导入文件:&l ...

随机推荐

  1. VBox on 14.04: Kernel driver not installed (rc=-1908) [duplicate]

    这几天刚刚装上Ubuntu的系统开始写Android代码,真心是流畅了很多,但是也出现了很多的问题. 还好 有大神护佑,童鞋博客首页,点击查看吧. 刚刚又遇到了一个新的问题,那就是我想用genymot ...

  2. C#3.0新增功能09 LINQ 基础01 语言集成查询

    连载目录    [已更新最新开发文章,点击查看详细] 语言集成查询 (LINQ) 是一系列直接将查询功能集成到 C# 语言的技术统称. 数据查询历来都表示为简单的字符串,没有编译时类型检查或 Inte ...

  3. Atom实用插件

    下载atom狠戳本链接 中文简体插件(工具栏,右键菜单,设置菜单) simplified-chinese-menu 代码格式化插件(支持多种语言) atom-beautify 智能补全资源路径插件 a ...

  4. 一键布署WEB应用脚本

    一.本机脚本(基于mac) #!/bin/sh  if [ $# -lt 1 ]; then echo "deploy.sh <version number>" exi ...

  5. lambda匿名函数,sorted(),filter(),map(),递归函数

    1.lambda匿名函数 为了解决一些简单的需求而设计的一句话函数 #计算n的n次方 def func(n): return n**n print(func(10)) f = lambda n: n* ...

  6. C# 一句很简单而又很经典的代码

    一.知识点 二.问题 如果以上四个问题,你很自信,那么以下,您就不要看了,因为我想说的东西真的很简单. 如果你开始怀疑自己,可以继续向下看.你自己到底真的理解吗??? 再看下面这段代码有没有问题? c ...

  7. sessionID是如何在客户端和服务器端传递的?

    sessionID是如何在客户端和服务器端传递的? 服务器初次创建session的时候后返回session到客服端(在返回头(response)中有setCookie),浏览器会把sessionnam ...

  8. java练习---11

    package cn.lyhh; class Person{ private String name; private int age; static String city = "A城&q ...

  9. Java 第四章

    switch选择结构 语法:switch(表达式){ case 常量 1: //代码块1:   break:  case 常量 2: //代码块2: break:    ......  default ...

  10. Eclipse Other Projects小问题

    Eclipse 不知什么时候多了个 "Other Projects" 文件夹,所有的项目又多了一层目录,如图所示: 虽然对功能没任何影响,但每次打开有些麻烦,多少感觉有些不爽…… ...