有关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触发事件及区别的更多相关文章

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

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

  2. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  3. js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

  4. Jquery选择器大全、属性操作、css操作、文档、事件等

    一.简介   定义  jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象  jQuery产 ...

  5. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

  6. 监听输入框变化(oninput,onpropertychange,onchange)

    oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于 ...

  7. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

  8. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  9. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

随机推荐

  1. http://codeforces.com/contest/535/problem/C

    C. Tavas and Karafs time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. Java比较器

    导语 本节内容,比较器Comparable是核心内容. 主要内容 重新认识Arrays类 两种比较器的使用 具体内容 Arrays类 在之前一直使用的"java.util.Arrays.so ...

  3. sql sever 基础知识及详细笔记

    第六章:程序数据集散地:数据库 6.1:当今最常用的数据库 sql  server:是微软公司的产品 oracle:是甲骨文公司的产品 DB2:数据核心又称DB2通用服务器 Mysql:是一种开发源代 ...

  4. express简介

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一个完整功能的网 ...

  5. 用shell脚本新建shell文件并自动生成头说明信息

    目标: 新建文件后,直接给文件写入下图信息 代码实现: [root@localhost test]# vi AutoHead.sh #!/bin/bash#此程序的功能是新建shell文件并自动生成头 ...

  6. 【框架学习与探究之消息队列--EasyNetQ(1)】

    前言 本文欢迎转载,实属原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7603554.html 废话 既然都是废话了,所以大家就可以跳过了,这里是博主有事没事 ...

  7. 面向对象编程笔记--static

    通过static方法,提供静态的不需要实例化即可访问的方法或属性.所有的调用者可以使用同一个类(不实例化)或对象(只实例化一次),可以应用的场景: 1)各个调用者共享数据,协同工作. 2)对象只可以实 ...

  8. 动态IP解析

    本文介绍两种方便获取主机动态IP的方式(DDNS,IP报告网页),并给出相应的代码实现. shell脚本获取本机IP,执行上传操作和更新DNS操作.定期执行通过crontab或者systemd等服务. ...

  9. asp.net中使用Global.asax文件中添加应用出错代码,写入系统日志文件或数据库

    void Application_Error(object sender, EventArgs e) { // 在出现未处理的错误时运行的代码 Exception objErr = Server.Ge ...

  10. Admob - Google广告接入

    前言 现在免费小游戏及应用的主要收入渠道就是通过接入广告.而Google的Admob适用于全球范围内的广告接入,文档方面及后台管理也是较为完善,接入还是比较便捷的. 不过Google目前还在墙外,虽然 ...