// 用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. MySql的数据库优化到底优啥了都??(2)

    嘟嘟在写此篇文章之前心里先默念(简单,通俗,工整)*10 吟唱完了,进入正题 3.Memory存储引擎 除了存放一个表结构相关信息的.frm文件在磁盘上,其他数据都存储在内存中.说白点哪天你数据库死机 ...

  2. 跟着阿里p7一起学java高并发 - 第18天:玩转java线程池,这一篇就够了

    java中的线程池,这一篇就够了 java高并发系列第18篇文章. 本文主要内容 什么是线程池 线程池实现原理 线程池中常见的各种队列 自定义线程创建的工厂 常见的饱和策略 自定义饱和策略 线程池中两 ...

  3. HTML5-新增语义化结构标签

    总结目录结构: 1.简洁的DOCTYPE声明 2.新的布局结构标签 header,article,section,aside,footer 3.新的其它常用标签: nav,hgroup,figure, ...

  4. centos7更新yum库为aliyun库

    1. 备份原来的yum源$sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置ali ...

  5. C# sql 批量插入数据库的语句

    //执行DataTable数据导入 public static int UpdateDt(string strConn, DataTable dt) { try { string tablaName ...

  6. 【iOS】NSNotification 常用方法

    NSNotification 常用的几个方法,代码如下: // 发送通知 [[NSNotificationCenter defaultCenter] postNotificationName:@&qu ...

  7. git指令-未完待更新

    git指令 1. $ git config --global user.name "Your Name" $ git config --global user.email &quo ...

  8. Redis优化建议

    优化的一些建议 1.尽量使用短的key 当然在精简的同时,不要完了key的"见名知意".对于value有些也可精简,比如性别使用0.1. 2.避免使用keys * keys *, ...

  9. 控制台出现_ob_:Obsever

    我遇到一个问题:我的代码想让他点击之后得到经纬度坐标数组,然后我就这样写了 然而控制台却读取出了

  10. Echarts图表插件(4.x版本)使用(二、带分类筛选的多个图表/实例化多个ECharts,以关系图/force为例)

    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...