前言
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。

首先看一下dom中元素事件:

onpropertychange: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。
oninput:是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
onchange: (a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);(b)当前对象失去焦点(onblur);
jQuery用法
$("#input1").bind("input propertychange",function(event){
console.log($("#input1").val())
});

原生Js
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>
//Input标签
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

项目中遇到一个问题:在input上加了一个监听事件

$('#inputId').bind('input propertychange', function() {
    dosomethig...
});

但我在使用Js改变这个input的值后,监听事件并不能触发

原因:

使用Js动态改变input的值时,没有任何鼠标和键盘的事件,所以并不能触发监听

解决:

在Js改变这个值之前加上一句话:$("#inputId").trigger("input");  问题得以解决

Js/jQuery实时监听input输入框值变化的更多相关文章

  1. jQuery实时监听input的值变化(input的值产生变化才会触发事件)

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

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

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

  3. 使用jQuery实时监听input输入值的变化

    //jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...

  4. jq 实时监听input输入框的变化

    项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...

  5. jQuery 实时监听<input>输入值的变化

    这方法比 on('keydown') 更实时 <input type='text' id='input1'/>$(document).ready(function(){ $('#input ...

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

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

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

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

  8. 实时监听input输入的变化(兼容主流浏览器)【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  9. 关于实时监听input的值得变化的问题

    onchange 关于input的onchange事件  其实是有出发条件的  并非实时监听的 1.鼠标点击事件  或者键盘事件(tab和wins键都可以触发  enter在ie9时不触发,火狐和ch ...

随机推荐

  1. MySQL延迟 查询主表

    在主外键表存在关系的时候如果加上"lazy=true"的话,则表明延迟,即只查询主表中的内容,而不查询外键表中的内容. <hibernate-mapping> < ...

  2. 2019-2020-1 20199301《Linux内核原理与分析》第五周作业

    第四章·系统调用的三层机制(上) 本章的重点在于用户态程序如何触发系统调用? 一.用户.内核.中断 IntelX86有四种不同的执行级别.Linux操作系统中只采用了其中的0和3两个特权级别,分别对应 ...

  3. maven 项目打包配置(build节点)

    参考博客:https://www.cnblogs.com/Binhua-Liu/p/5604841.html maven-assembly-plugin的使用 : https://www.cnblog ...

  4. CH6801 棋盘覆盖

    6801 棋盘覆盖 0x60「图论」例题 描述 给定一个N行N列的棋盘,已知某些格子禁止放置.求最多能往棋盘上放多少块的长度为2.宽度为1的骨牌,骨牌的边界与格线重合(骨牌占用两个格子),并且任意两张 ...

  5. .net序列化 - Newtonsoft(Json.Net)简单应用

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库. Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简 ...

  6. myeclipse常用快捷键和小技巧

    常用快捷键: Ctrl + Shift + R 在整个项目中查找文件 Ctrl + H 查找文件,可以限定文件中包含的内容 Ctrl + Shift + G 查找一个方法在哪里被调用 Ctrl + O ...

  7. 九.Protobuf3特殊类型

    Protobuf3 Any类型 Any消息类型允许您将消息作为嵌入类型,而不需要它们 .proto定义.Any包含任意序列化的消息(字节),以及一个URL,该URL充当该消息的全局唯一标识符并解析为该 ...

  8. maven 在执行package,install,deploy时使用clean与不使用clean的区别

    有时候用mvn install后,新改的内容不生效,一定要后来使用mvn clean install 才生效,由于之前没有做记录,以及记不清是什么情况下才会出现的问题,于是想看看clean和不clea ...

  9. 0.Pycharm安装

    以windows版本举例: 1.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载P ...

  10. Django 第一天 开端

    今日内容: 一.HTTP协议 1.HTTP协议简介 参考博客:https://www.cnblogs.com/clschao/articles/9230431.html 是超文本传输协议 现在使用最广 ...