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的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现回到顶部效果
Oct 19 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连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
js文字横向滚动特效
2015/11/11 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python3 反射的四种基本方法解析
2019/08/26 Python
用python计算文件的MD5值
2020/12/23 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android