思路:通过setInterval()方法去定时对比新旧值

当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触发这2个事件的,但是一旦js去改变了就不能实时监听值得改变


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
</head>
<body>
<input value="123" id="myInput" />
</body>
<script >
$(function(){
var value=$("#myInput").val()
setInterval(function(){
/**
*1、隔200ms比较一次值
*2、注意JavaScript == 和===的区别
*3、三目运算符 ?: 可以接函数调用
*/
value === $("#myInput").val() ? doSomething() : console.log("changed !!!"),
value=$("#myInput").val();
},200)
setInterval(function(){//仅仅为了模拟JavaScript改变了值
$("#myInput").val("123123");
},2000)
function doSomething(){
console.log("no changed !!!")
} });
</script>
</html>

实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听的更多相关文章

  1. input长度随输入内容动态变化 input光标定位在最右侧

    <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this. ...

  2. PIE SDK栅格图层渲染变化事件监听

    1. 功能简介 通过PIE SDK加载图层后,会默认的赋值给数据一个渲染.当用户重新给数据赋值Render或改变数据显示效果时,会触发渲染变化事件. 所谓的事件监听是在事件触发时,将执行用户指定的函数 ...

  3. TextWatcher-监听输入框内容变化

    今天在做邮件登录的时候,遇到了输入框(Edittext)监听事件(TextWatcher),现在记录下. 首先看如下代码 eText.addTextChangedListener(new TextWa ...

  4. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  5. 实时监听input输入框value的变化:

    HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...

  6. 原生js监听input值发生变化

    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

  7. input输入框内容变化实时监听

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入 ...

  8. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  9. 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...

随机推荐

  1. 现有某电商网站用户对商品的收藏数据,记录了用户收藏的商品id以及收藏日期,名为buyer_favorite1。 buyer_favorite1包含:买家id,商品id,收藏日期这三个字段,数据以“\t”分割

    实验内容(mapReduce安装请按照林子雨教程http://dblab.xmu.edu.cn/blog/631-2/) 现有某电商网站用户对商品的收藏数据,记录了用户收藏的商品id以及收藏日期,名为 ...

  2. 【pytorch 代码】pytorch 网络结构可视化

    部分内容转载自 http://blog.csdn.net/GYGuo95/article/details/78821617,在此表示由衷感谢. 此方法需要安装python-graphviz:  con ...

  3. 20189220 余超《Linux内核原理与分析》第七周作业

    分析Linux内核创建一个新进程的过程 基础知识概括 操作系统内核实现操作系统的三大管理功能,即进程管理功能,内存管理和文件系统.对应的三个抽象的概念是进程,虚拟内存和文件.其中,操作系统最核心的功能 ...

  4. 将lol人物模型导入到Unity3d

      接下来我打算将提取出来的lol人物模型导入到Unity3D中,这样会更加好玩!(不知道如何提取lol人物模型的话请看该链接)   首先我们已经把dae文件导入到c4d中了,可以看到这是一只吹笛子的 ...

  5. spring AOP的使用步骤

    Spring AOP定义及术语:https://www.cnblogs.com/wangcp-2014/p/11544674.html spring AOP的使用,分三个步骤,记住这三个步骤,AOP就 ...

  6. (转)SQLAlchemy入门和进阶

    URL:https://zhuanlan.zhihu.com/p/27400862 https://www.cnblogs.com/mrchige/p/6389588.html---SQLAlchem ...

  7. ROS tf-深入Time和TF

    博客转载自:https://www.ncnynl.com/archives/201702/1313.html ROS与C++入门教程-tf-深入Time和TF 说明: 介绍使用waitForTrans ...

  8. EF Core基本使用

    Mysql: nuget 安装 Pomelo.EntityFrameworkCore.MySql Microsoft.EntityFrameworkCore.Design csprj 修改: < ...

  9. [LeetCode] 507. Perfect Number 完美数字

    We define the Perfect Number is a positive integer that is equal to the sum of all its positive divi ...

  10. 【Tools】UltraISO官网最新板+注册码

    官网最新UltraISO 9.7版本安装文件,非注册机,亲测可用,若注册码失效,评论会删除. 土豪赏逼地址: https://download.csdn.net/download/qq_1818716 ...