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 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
Jquery实现获取子元素的方法分析
Aug 24 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
lib.utf.js
2007/08/21 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
详解重置Django migration的常见方式
2019/02/15 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python 如何测试文件是否存在
2020/07/31 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
java字符串格式化输出实例讲解
2021/01/06 Python
Python 内存管理机制全面分析
2021/01/16 Python
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
介绍一下Java的事务处理
2012/12/07 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
店长岗位的工作内容
2013/11/12 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript