脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery/JS监听input输入框

jQuery/JS监听input输入框值变化实例

 更新时间：2019年10月17日 15:50:50   作者：虚无境-  
在本篇文章里小编给大家整理的是一篇关于jQuery/JS监听input输入框值变化实例内容，需要的朋友们学习下。

input事件：

onchange：

1、要在 input 失去焦点的时候才会触发；

2、在输入框内容变化的时候不会触发change，当鼠标在其他地方点一下才会触发；

3、onchange event 所有主要浏览器都支持；

4、onchange 属性可以使用于：<input>, <select>, 和 <textarea>。

<script>
  function change(){
    var x=document.getElementById("password");
    x.value=x.value.toUpperCase();<br data-filtered="filtered">　　　　console.log("出发了")
   }
</script>
</head>
<body>
 
  输入你的密码: <input type="text" id="password" onchange="change()">
 
</body>

oninput:

1、在用户输入时触发，它是在元素值发生变化时立即触发；

2、该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

3、缺陷：从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9 以下不支持，所以IE9以下可用onpropertychange 事件代替。

JS: <input type="text" id="password" oninput="change()">
jQuery： $("#password").on('input propertychange', change);

onpropertychange:

1、会实时触发，会在元素的属性改变时就触发事件。当元素disable=true时不会触发

2、缺陷：只在IE 下支持，其他浏览器不支持，用oninput来解决。

<input type="text" id="password" oninput="onpropertychange()">

jQuery:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>RunJS</title> 
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head> 
  <body> 
    <input type="text" id="password" autoComplete='off'> 
   <script type="text/javascript">
$(function(){ 
　　$('#password').bind('input propertychange', function() { <br data-filtered="filtered">　　　　 console.log('在实时触发！！！')
  　　$('#result').html($(this).val().length); <br data-filtered="filtered"> 　　　　$(this).val().length != 0 ? $("#login").css("background-color", "#086AC1") : $("#login").css("background-color", "#529DE0")
　　});
})  
    </script>
  </body> 
</html>

JavaScript;

<script type="text/javascript">
  // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
    function OnInput (event) {
      alert ("The new content: " + event.target.value);
    }
  // Internet Explorer
    function OnPropChanged (event) {
      if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
      }
    }
</script>
 
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

以上就是本次介绍的全部相关知识点，感谢大家的学习和对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • jquery load()在firefox(火狐)下显示不正常的解决方法

    jquery load()在firefox(火狐)下显示不正常的解决方法

    觉得应该是由于 直接将www.baidu.com的内容放到div中,对于较严格的FireFox可能不会处理用cssviewter查看处理后的页面源码果然发现div中为空
    2011-04-04
  • 实例详解jQuery的链式编程风格

    实例详解jQuery的链式编程风格

    jQuery中的链式操作，它让代码变得更有层次更简洁，所以这篇文章主要给大家介绍了关于jQuery链式编程风格的相关资料,需要的朋友可以参考下
    2021-06-06
  • jquery实现用户信息修改验证输入方法汇总

    jquery实现用户信息修改验证输入方法汇总

    这篇文章主要介绍了jquery实现用户信息修改验证输入方法,实例汇总了jquery常用的提交、验证、判定、修改等相关技巧,非常实用,需要的朋友可以参考下
    2015-07-07
  • 利用jquery实现实时更新歌词的方法

    利用jquery实现实时更新歌词的方法

    这篇文章主要给大家介绍了如何利用jquery实现实时更新歌词的方法,文中给出了详细的实现思路和示例代码，对大家的参考借鉴具有一定的价值，有需要的朋友下面来跟着小编一起学习学习吧。
    2017-01-01
  • 日常收藏的jquery技巧

    日常收藏的jquery技巧

    jQuery是继prototype 之后的又一个优秀的Javascript框架，本篇文章给大家分享收藏的jquery技巧，对jquery技巧相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • jQuery实现可展开折叠的导航效果示例

    jQuery实现可展开折叠的导航效果示例

    这篇文章主要介绍了jQuery实现可展开折叠的导航效果,结合实例形式分析了基于jquery.easing.1.3.js插件的展开折叠效果实现技巧,非常简单实用,需要的朋友可以参考下
    2016-09-09
  • jquery性能优化高级技巧

    jquery性能优化高级技巧

    jquery性能优化做好，速度也很快，那么如何提高jquery性能呢，本篇文章给大家介绍jquery性能优化高级技巧，需要的朋友可以参考下
    2015-08-08
  • 对于jQuery性能的一些优化建议

    对于jQuery性能的一些优化建议

    这篇文章主要介绍了对于jQuery性能的一些优化建议,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下
    2015-08-08
  • jQuery实现颜色打字机的完整代码

    jQuery实现颜色打字机的完整代码

    这篇文章主要介绍了jQuery实现颜色打字机的完整代码，代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • jQuery移动web开发中的页面初始化与加载事件

    jQuery移动web开发中的页面初始化与加载事件

    这篇文章主要介绍了jQuery移动web开发中的页面初始化与加载事件,是JavaScript移动端页面开发学习中的基础知识,需要的朋友可以参考下
    2015-12-12

最新评论