// 用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. SublimeText3 汉化

    Sublime Text3 汉化 Sublime Text 作为一款方便的代码编辑软件广受大家喜爱,所以在自己在汉化成功后记录该方法,方便大家使用. 安装 一个插件 package control 即 ...

  2. .net持续集成sonarqube篇之sonarqube基本操作(一)

    系列目录 Sonarqube Web管理界面虽然设计的简洁大方,也非常直观,但是由于功能繁多,这对快速入手以及快速定位到想要的功能都是一个挑战,在以后的几个小节里我们简要介绍. OwerView(概览 ...

  3. Redis(四)--- Redis的命令参考

    1.简述 数据类型也称数据对象,包含字符串对象(string).列表对象(list).哈希对象(hash).集合对象(set).有序集合对象(zset). 2.String数据类型命令 string  ...

  4. python基础——字符串(string)

    字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可. str1 = 'python' str2 = " ...

  5. bitset的简单用法

    1.头文件 #include<bitset> 2.基本操作 bitset<n> b; b有n位,每位都为0. 参数n可以为一个表达式.如bitset<5> b, 则 ...

  6. sqlmap续

    sqlmap续 注入语句(知道绝对路径时候可用) http://192.168.99.171/test2/sqli/example10.php?catid=3’union select 1,’< ...

  7. 【Spring】The matching wildcard is strict……

    applicationContext.xml 文件抛出了这个异常信息. 解决方法: 需要在 namespace 后加上对应的 schemaLocation,如下所示: <?xml version ...

  8. 蓝桥杯 2n皇后问题 深搜

    默认大家会了n皇后问题 基础练习 2n皇后问题   时间限制:1.0s   内存限制:512.0MB     问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和 ...

  9. postman使用pre-request script计算md5

    接口加了验签逻辑,具体是md5(salt+时间戳).被某君吐槽说测试不方便啊能不能先关掉.其实没有必要打开又关闭验签功能,postman的pre-request script功能完全可以模拟客户端加密 ...

  10. Spring Boot 修改静态资源一定要重启项目才会生效吗?未必!

    回顾热部署 Spring Boot 中的热部署相信大家都用过吧,只需要添加 spring-boot-devtools 依赖就可以轻松实现热部署.Spring Boot 中热部署最最关键的原理就是两个不 ...