// 用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. Vue的基本使用(一)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HashSet源码解读

    一:先看其实现了哪些接口和继承了哪些类 1.实现了Serializable接口,表明它支持序列化. 2.实现了Cloneable接口,表明它支持克隆,可以调用超类的clone()方法进行浅拷贝. 3. ...

  3. python中的元类(metaclass)

    认识python中元类的准备工作. 1,首先需要明白一个概念就是python中一切皆为对象. input: class Trick(object): pass ') print type(1234) ...

  4. kuberenetes CRD开发指南

    扩展kubernetes两个最常用最需要掌握的东西:自定义资源CRD 和 adminsion webhook, 本文教你如何十分钟掌握CRD开发. kubernetes允许用户自定义自己的资源对象,就 ...

  5. VisualStudio中的单元测试

    1. VisualStuio中的测试资源管理器.CodeLens和ReSharper 上一篇文章重温了<单元测试的艺术>里提到的单元测试的技术及原则.这篇文章实践使用VisualStudi ...

  6. 用大白话告诉你 :Java 后端到底是在做什么?

    阅读本文大概需要 6 分钟. 作者:黄小斜 新手程序员通常会走入一个误区,就是认为学习了一门语言,就可以称为是某某语言工程师了.但事实上真的是这样吗?其实并非如此. 今天我们就来聊一聊,Java 开发 ...

  7. Tomcat发布War包或者Maven项目

    在tomcat的conf目录下面的server.xml中修改如下: Host name="localhost"  appBase="webapps" unpac ...

  8. 微服务之springboot 自定义配置(一)Application配置文件

    配置的文件的格式 springboot可以识别两种格式的配置文件,分别是yml和properties 文件.我们可以将application.properties文件换成application.yml ...

  9. 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  10. Java统计代码行数

    package test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...