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 ...
随机推荐
- redis开发相关
1.为什么要用缓存,缓存的使用场景2.redis数据存储类型 string/list/set/hash/sort set(zset)3.redis的常用数据类型,使用方式4.redis实现的跳跃表是什 ...
- PLSQl的使用技巧与快捷键
最近在开发过程中,遇到一些麻烦,就是开发效率问题,有时候其他同事使用PLSQL 编程效率明显高于自己,观察了好久,才发现他使用PLSQL 已经很长时间了而且,他自己也在其中添加了好多快捷方式, ...
- Python——python3的requests模块的导入
前言 突然就要搞python,我这个心哦~ 版本 | python 3.7 步骤 配置环境变量 右击-->属性-->打开文件位置 进入到脚本目录: C:\Users\Administrat ...
- Wiki with Alpha
Problem G. Wiki with AlphaInput file: standard input Time limit: 1 secondOutput file: standard outpu ...
- Oracle 解决无法生成Snapshot问题
1. 概述 Specify the number of days of snapshots to choose from ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- apt-get linux 虚拟机安装vm tools下载
要重启机器才行D:\Program Files (x86)\linux.iso解压tar zxvf VMwareTools-9.9.0-2304977.tar.gz
- Problem 5 素数筛法+并查集
$des$ 给定一个长度为 $n$ 的正整数序列 ${a_i }$.将 ${1,2,...,n}$ 划分成两个非空集合 $S.T$,使得 $gcd(\prod_{i \in S} a_i, \prod ...
- 33、shuffle性能优化
一.shuffle性能优化 1.没有开启consolidation机制的性能低下的原理剖析 2.开启consolidation机制之后对磁盘io性能的提升的原理 spark.shuffle.conso ...
- 洛谷P3124被困在haybales
题目 按理来说是可以二分的,但是发现其实直接暴力然后注意细节就可以了. 先找到牛所在的起点,然后分别向右找和向左找. 第一次查找从\(r\)点冲到\(l\)点时,突破不了\(l\),从\(l\)点冲到 ...
- 在Matlab中的plot
在Matlab中画图时,经常会使用plot函数命令.一些隐含的画图命令也默认调用plot函数命令,如spy命令,可以画出矩阵的稀疏度图形. 另外,有时为了方便,会将一些处理图形的操作和命令列在一块,命 ...