Jquery实时监听input value的实例

 更新时间:2017年01月26日 11:07:53   投稿:jingxian  
下面小编就为大家带来一篇Jquery实时监听input value的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

实例如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body id="lia-body"> 
  <div class="lia-content"> 
    <div class="inputwrapper"> 
      <label><span>姓名:</span><input type="text" name="fullname"></label> 
      <div class="result"></div> 
    </div> 
  </div> 
  <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> 
  <script> 
    $(function(){ 
      var $inputwrapper = $('#lia-body .lia-content .inputwrapper'); 
      $inputwrapper.find('input').on('input propertychange',function(){ 
        var result = $(this).val(); 
        console.log(result); 
        $inputwrapper.find('.result').html(result); 
      }); 
    }) 
  </script> 
</body> 
</html>

onchange触发事件必须满足两个条件:

1)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

2)当前对象失去焦点(onblur);

onpropertychange

只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

oninput是onpropertychange的非IE版本,支持firefox和opera等浏览器

但不同的是,它绑定于对象时,并非该对象所有属性改变都能触发事件,只有在对象的value值发生改变时才会生效。

这里我们用来监听input value的改变再好不过了。

以上这篇Jquery实时监听input value的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery控制控件文本的长度的操作方法

    jQuery控制控件文本的长度的操作方法

    这篇文章主要介绍了jQuery控制控件文本的长度的操作方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • jquery模拟alert的弹窗插件

    jquery模拟alert的弹窗插件

    这篇文章主要介绍了jquery模拟alert的弹窗插件的相关资料,需要的朋友可以参考下
    2015-07-07
  • 解决jquery插件:TypeError:$.browser is undefined报错的方法

    解决jquery插件:TypeError:$.browser is undefined报错的方法

    这篇文章为大家分享了一个解决jquery插件:TypeError:$.browser is undefined报错的方法,解决报错问题的方法也很简单,需要解决此类问题的朋友不要错过这篇文章。
    2015-11-11
  • ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

    ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

    在web应用里,我们经常需要通过其他控件的事件触发动态构造DropDownList数据内容。在这节中,我们将会看到如何实现通过选择第一个下来框的内容来动态构造第二个下拉框的内容
    2012-02-02
  • jQuery实现的弹幕效果完整实例

    jQuery实现的弹幕效果完整实例

    这篇文章主要介绍了jQuery实现的弹幕效果,结合完整实例形式分析了jQuery通过结合时间函数控制输入文字与样式的渐变实现弹幕效果,需要的朋友可以参考下
    2017-09-09
  • jQuery实现获取绑定自定义事件元素的方法

    jQuery实现获取绑定自定义事件元素的方法

    这篇文章主要介绍了jQuery实现获取绑定自定义事件元素的方法,涉及jQuery方法重载、事件绑定及元素操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery之DOM对象和jQuery对象的转换与区别分析

    jQuery之DOM对象和jQuery对象的转换与区别分析

    这篇文章主要介绍了jQuery之DOM对象和jQuery对象的转换与区别分析,对比分析了DOM对象和jQuery对象的原理与用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • jQuery 表单验证扩展(四)

    jQuery 表单验证扩展(四)

    周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低,不知道是文章太失水准还是什么其他原因,这里写文章只是为了分享一下自己写代码的心得,
    2010-10-10
  • jQuery文本框得到与失去焦点动态改变样式效果

    jQuery文本框得到与失去焦点动态改变样式效果

    这篇文章主要介绍了jQuery文本框得到与失去焦点动态改变样式效果,涉及jQuery针对页面表单元素样式的动态操作技巧,需要的朋友可以参考下
    2016-09-09
  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下。
    2015-04-04

最新评论