Js/jQuery实时监听input输入框值变化
前言
在做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输入框值变化的更多相关文章
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- jQuery 实时监听<input>输入值的变化
这方法比 on('keydown') 更实时 <input type='text' id='input1'/>$(document).ready(function(){ $('#input ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- 关于实时监听input的值得变化的问题
onchange 关于input的onchange事件 其实是有出发条件的 并非实时监听的 1.鼠标点击事件 或者键盘事件(tab和wins键都可以触发 enter在ie9时不触发,火狐和ch ...
随机推荐
- LFU(最近最不常用)实现(python)
from collections import defaultdict, OrderedDict class Node: __slots__ = 'key', 'val', 'cnt' def __i ...
- python实现抖音多线程下载无水印视频【附源码】
昨天发了一个无水印解析,评论说想要多线程下载,还是比较简单的. py文件同目录下创建url.txt,把链接一行一行复制进去,就能批量下载. 代码中的延时不能去掉,由于是多线程,速度较快,延时很重要. ...
- 适合于做项目与团队管理的工具(Choerodon)
官网链接:http://choerodon.io/zh/ 此处不做太多的介绍,需要了解的朋友进入官网进行查看. Choerodon猪齿鱼开源多云技术平台,是基于开源技术Kubernetes,Istio ...
- pt100、pt1000,和热电偶
最近温度测试这块,已使用过pt100.pt1000,和热电偶,这里进行大致的总结.1.pt系列pt100和pt1000的精度相比较,1000更加精细,毕竟他的电阻值更加大.两个电阻都是有分度表的,pt ...
- logstash-output-jdbc使用
项目需要,使用logstash定时读取log文件,并插入mysql数据库中,output使用logstash-output-jdbc插件.该插件不是默认安装的,需要使用命令:bin/logstash- ...
- [LuoguP1462]通往奥格瑞玛的道路
题目链接 题意简述:现在有一个图,每经过一个点就会交钱,走一条路就会扣血.在血量>0的前提下,要从1走到n点,并且要求路径上交钱的最大值最小. 解题思路:首先最大值最小,我们选择二分.目前有两个 ...
- Problem 1 bfs+set
$des$ 小G有一个长度为 $n$ 的 01 串 T ,其中只有 $T_S = 1$,其余位置都是 $0$.现在小G可以进行若干次以下操作:选择一个长度为 $K$ 的连续子串(K是给定的常数),翻转 ...
- establish状态,本地ip和端口连接本地ip端口可能是一样的。
以下是从stackoverflow上抄下来的,很有帮助 How can you have a TCP connection back to the same port? A TCP connectio ...
- UOJ#400. 【CTSC2018】暴力写挂 边分治 线段树合并
原文链接 www.cnblogs.com/zhouzhendong/p/UOJ400.html 前言 老年选手没有码力. 题解 先对第一棵树进行边分治,然后,设点 x 到分治中心的距离为 $D[x]$ ...
- HTML meta pragma no-cache 页面缓存
HTML meta pragma no-cache 页面缓存不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.) <me ...