有关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. Django进阶篇【2】

    在学习之前,我们补充一个知识点(static用法) 创建APP 配置: setting.py STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static') ...

  2. 聊聊Java中几种常用的设计模式

    1.单例模式(有的书上说叫单态模式其实都一样) 该模式主要目的是使内存中保持1个对象.看下面的例子: package org.sp.singleton; //方法一 public class Sing ...

  3. python之testcenter操作

    一.设置python环境 1. 从以下路径中将StcPython.py文件拷贝出来 Linux: /Installdir/Spirent_TestCenter_4.xx/Spirent_TestCen ...

  4. JS封装运动框架(另一种写法)

    function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...

  5. java课程作业--动手动脑

    随机数: 1)编写一个方法,使用以下算法生成指定数目(比如1000个)的随机整数. Modulus=231-1=int.MaxValue Multiplier=75=16807 C=0 当显示过231 ...

  6. HDU1423 LCIS

    1,先离散化,然后DP: 注意这个解法中,dp[i][j][k]代表a序列中前i个和b序列中前j个数结尾为k或小于k时的最大. 但是由于i是单增(一次1->n),而j反复变化(多次1->m ...

  7. 学习笔记之08试用div做网页(滨院)-小作业

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. (10.11)Java第一小步

    在度过大一和大二浑浑噩噩的咸鱼生活之后,我决定 开始为自己的未来负责,开始学习自己喜欢的Java,同时决定以这篇博客来开启自己的博客之旅和Jaca的学习之路. 以后我也会陆续在博客园更新自己的博客,记 ...

  9. OpenWRT UCI命令实现无线中继

    本文主要功能主要是利用OpenWRT系统uci命令实现无线中继,主要是利用uci程序修改/etc/congfig/目录下的配置文件.实现步骤如下主要分为以下几步: 1) 安装 relayd (opkg ...

  10. angular1与swiper

    angular1路由切换过程中swiper不能使用. 问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面 ...