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


Posted in jQuery onOctober 17, 2019

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 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
You might like
PHP 日,周,月点击排行统计
2012/01/11 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
新浪的图片新闻效果
2007/01/13 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python pickle模块用法实例
2015/04/14 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
单位在职证明范本
2014/01/09 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
开学随笔
2015/08/15 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
如何使用python包中的sched事件调度器
2022/04/30 Python