jquery多种方式实现输入框input输入时的onput,onpropertychange,onchange触发事件及区别
有关inputs输入内容的事件监听,一般我们会想到下面几个关键词:onput,onpropertychange,onchange
onput与onchange的一个区分
onput:该事件在 <input> 或 <textarea> 元素的值发生改变时触发(立即触发);
onchange:该事件在在 <input> ,<textarea>, <keygen> 和 <select> 元素失去焦点时触发;
如下测试实例:
onchange和onput都输入结束后的效果:

当onchange和onput都输入结束后的点击页面失去焦点后的效果:

一般js中使用方式:object.oninput/onchange=function(){
//触发实现的功能代码
...........
};
onpropertychange:在触发对象改变任何属性时都会触发;这个是IE专属的,其他浏览器不兼容
不过我们可以这样来使用兼容其他的浏览器
$('.proitem input').bind('input propertychange', function() {
$(this).css("box-shadow","none");
});
就是每次输入内容都会触发使得其中的阴影效果消失。
jquery多种方式实现输入框input输入时的onput,onpropertychange,onchange触发事件及区别的更多相关文章
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- js和jquery中的触发事件
改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...
- 监听输入框变化(oninput,onpropertychange,onchange)
oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于 ...
- jQuery绑定事件-多种方式实现
jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
随机推荐
- Django进阶篇【2】
在学习之前,我们补充一个知识点(static用法) 创建APP 配置: setting.py STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static') ...
- 聊聊Java中几种常用的设计模式
1.单例模式(有的书上说叫单态模式其实都一样) 该模式主要目的是使内存中保持1个对象.看下面的例子: package org.sp.singleton; //方法一 public class Sing ...
- python之testcenter操作
一.设置python环境 1. 从以下路径中将StcPython.py文件拷贝出来 Linux: /Installdir/Spirent_TestCenter_4.xx/Spirent_TestCen ...
- JS封装运动框架(另一种写法)
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...
- java课程作业--动手动脑
随机数: 1)编写一个方法,使用以下算法生成指定数目(比如1000个)的随机整数. Modulus=231-1=int.MaxValue Multiplier=75=16807 C=0 当显示过231 ...
- HDU1423 LCIS
1,先离散化,然后DP: 注意这个解法中,dp[i][j][k]代表a序列中前i个和b序列中前j个数结尾为k或小于k时的最大. 但是由于i是单增(一次1->n),而j反复变化(多次1->m ...
- 学习笔记之08试用div做网页(滨院)-小作业
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (10.11)Java第一小步
在度过大一和大二浑浑噩噩的咸鱼生活之后,我决定 开始为自己的未来负责,开始学习自己喜欢的Java,同时决定以这篇博客来开启自己的博客之旅和Jaca的学习之路. 以后我也会陆续在博客园更新自己的博客,记 ...
- OpenWRT UCI命令实现无线中继
本文主要功能主要是利用OpenWRT系统uci命令实现无线中继,主要是利用uci程序修改/etc/congfig/目录下的配置文件.实现步骤如下主要分为以下几步: 1) 安装 relayd (opkg ...
- angular1与swiper
angular1路由切换过程中swiper不能使用. 问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面 ...