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\" />

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论