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 ...
随机推荐
- K相邻算法
刚开始学习机器学习,先跟这<机器学习实战>学一些基本的算法 ----------------------------------分割线--------------------------- ...
- 【NOIP】OpenJudge - 15:银行利息
#include<stdio.h>//银行利息 int main() { float a,b; int i,c,d; scanf("%f%f%d",&a,&am ...
- 一步使你的asp.net网站在手机浏览器上全屏显示
首先要加入下面的代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
- 51nod 1593 公园晨跑 | ST表(线段树?)思维题
51nod 1593 公园晨跑 有一只猴子,他生活在一个环形的公园里.有n棵树围绕着公园.第i棵树和第i+1棵树之间的距离是 di ,而第n棵树和第一棵树之间的距离是 dn .第i棵树的高度是 hi ...
- angular添加,查找与全部删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Hudson + SVN + Maven 持续集成实现自动化编译、打包、部署(over SSH 和 Deploy war/ear to a container 两种部署方式)
下载hudson ,安装部署http://hudson-ci.org/ 将下载的hudson-3.3.3.war放到tomcat的webapps目录下并启动tomcat,输入地址访问 点击Instal ...
- elasticsearch高级组合查询ava
/** * 高级检索(组合条件检索)must相当于sql and操作 * @param modelType 0为模糊查询,1为精确查询 * @param index 索引 ...
- RoportNG报表显示中文乱码和TestNG显示中文乱码实力解决办法
最近在进军测试自动化框架学习阶段,但无意间总是会伴随小问题的困扰,比如中文乱码,而导致显示总是不舒服,个人觉得,就一定要解决,似乎有点点强迫症.所以遇到RoportNG报表显示中文乱码和TestNG显 ...
- 使用Kotlin开发第一个Android应用
直奔主题 第一步:为AndroidStudio安装Kotlin插件 在线安装步骤:File—>Settings—>Plugins—>Install JetBrains plugin… ...
- configparser模块(拷贝)
该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). 创建文件 来看一个好多软件的常见文档格式如下: [DEFAULT] ...