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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
jquery插件实现图片悬浮
Apr 16 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文件上传简单实现方法
2015/01/24 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
JavaScript的Cookies
2008/01/16 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
pytest中文文档之编写断言
2019/09/12 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python版中国省市经纬度
2020/02/11 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
英语四级考试作弊检讨书
2014/09/29 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL