js 实时监听input中值变化

关注:457发表时间:2017-09-28 15:17:06
  1. >  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title>RunJStitle>  
  6.     <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js">script>  
  7.     head>  
  8.     <body>  
  9.         <h1 >  
  10.             实时监测input中值的变化  
  11.         h1>  
  12.         <input type="text" id="username" autoComplete='off'>  
  13.         <div id="result">div>  
  14.     body>  
  15. html>  


[javascript]  view plain  copy
  print ?
  1. $(function(){  
  2.   
  3. $('#username').bind('input propertychange'function() {  
  4.     $('#result').html($(this).val().length + ' characters');  
  5. });  
  6.   
  7. })  


类似于,实现微博的‘还能输入xxx个字符’
oninput,onpropertychange,onchange的用法
onchange触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。


  • 联系人:
  • QQ:
  • 留言内容:
  • 验证码:
    请输入验证码

留言列表


【5】2017-04-30
66666
回复内容2017-04-30
去你的……
重置文章字号 更多+

贴心服务

  • 网站每周自动备份
  • 生成APP,一下高大上
  • 云服务器,不需另外买空间
  • 域名代备案

帮助中心

  • Bootstrap前端框架
  • SuperSlide.2.1.1
  • FlexSlider-0690ec2
  • 有问必答

联系我们

  • service@sanxiegang.com
©2008-2017 三斜杠网络公司版权所有 盗用必究 QQ:2558731797
三斜杠专注于深圳小微企业网站建设,为您打造个性化互联网平台. 粤ICP备17053880号