js监听input输入框值的实时变化实例

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

1、在元素上同时绑定 oninput 和onporpertychanger事件

例:

<script type="text/JavaScript">
function aa(e){alert("inputting!!");}
</script>

<input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" />

2、使用原生js添加监听事件

<script type="text/javascript">
 $(function(){
if("\v"=="v"){//true为IE浏览器,感兴趣的同学可以去搜下,据说是现有最流行的判断浏览器的方法
document.getElementById("a").attachEvent("onporpertychange",function(e){
console.log("inputting!!");
}
}else{
document.getElementById("a").addEventListener("onporpertychange",function(e){
console.log("inputting!!");
}
}
});
</script>
<input type="text" id="a"/>

3、使用jQuery方法绑定事件

<script type="text/javascript">
 $(function(){
$("#a").bind('input porpertychange',function(){
console.log("e");
});
});
</script>
<input type="text" id="a"/>

在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称,event.propertyName

实例1:

<input type="text" oninput=" " onpropertychange="" value="Text field" />

实例2:

$("#name").bind('input porpertychange',function(){
    var thisTxt=$("#name").val();
    $(this).siblings("p").html(thisTxt)
  })

实例3:

//手机号码分段显示
register.phonePropertychange = function() {
  _this = register;
  _input = $(this);
  var v = $(this).val();
  v = v.replace(new RegExp(/ /g),'');
  var v1 = v.slice(0,3);
  var v2 = v.slice(3,7);
  var v3 = v.slice(7,11);
  if(v2==''){
    _input.focus().val(v1);
  }else if(v3==''){
    _input.focus().val(v1+' '+v2);
  }else{
    _input.focus().val(v1+' '+v2+ ' '+v3);
  };
 
  //手机号输入完成字体颜色改变
  if (v.length === 11) {
    if(_this.regexpPhone(v)){
      _input.css('color','#000');
      $('#btnSendCode').addClass('c-26a949');
      _input.blur();;
    }else{
      layer.open({content: '手机号码不正确,请重新输入',time: 2, end:function(){
        _input.val('');
      }});
    }
  }else{
    _input.css('color','#26a949');
  }
}

//验证手机号
register.regexpPhone = function(phone){
  return /^1[3|4|5|7|8]\d{9}$/.test(phone);
}

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

相关文章

  • javascript 文档的编码问题解决

    javascript 文档的编码问题解决

    在引用与本页面编码格式不一样的js文档时,如果被引用的js代码有ASCII字符之外的字符,那么就会出现代码错误。
    2009-03-03
  • swiperjs实现导航与tab页的联动

    swiperjs实现导航与tab页的联动

    这篇文章主要为大家详细介绍了swiperjs实现导航与tab页的联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JavaScript实现的使用键盘控制人物走动实例

    JavaScript实现的使用键盘控制人物走动实例

    这篇文章主要介绍了JavaScript实现的使用键盘控制人物走动实例,也可说是一个JS实现的小人走动小游戏,需要的朋友可以参考下
    2014-08-08
  • Bootstrap 响应式实用工具实例详解

    Bootstrap 响应式实用工具实例详解

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。下面通过本文给大家分享Bootstrap 响应式实用工具,一起看看吧
    2017-03-03
  • bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据

    bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据

    这篇文章主要为大家详细介绍了bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 基于Web Audio API实现音频可视化效果

    基于Web Audio API实现音频可视化效果

    这篇文章主要介绍了基于Web Audio API实现音频可视化效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • uniapp中scroll-view实现自动滚动到最底部的方法

    uniapp中scroll-view实现自动滚动到最底部的方法

    这篇文章主要给大家介绍了关于uniapp中scroll-view实现自动滚动到最底部的相关资料,在uniapp日常开发的过程中经常会有局部滚动的需求,而scroll-view组件正好可以满足这一需求,需要的朋友可以参考下
    2023-10-10
  • 解决layer.confirm快速点击会重复触发事件的问题

    解决layer.confirm快速点击会重复触发事件的问题

    今天小编就为大家分享一篇解决layer.confirm快速点击会重复触发事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • BootStrap入门学习第一篇

    BootStrap入门学习第一篇

    这篇文章主要为大家详细介绍了BootStrap入门学习第一篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JS实现动态表格的添加,修改,删除功能(推荐)

    JS实现动态表格的添加,修改,删除功能(推荐)

    这篇文章主要介绍了JS实现动态表格的添加,修改,删除功能(推荐)的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06

最新评论