jQuery/JS監(jiān)聽input輸入框值變化實例

更新時間：2019年10月17日 15:50:50 作者：虛無境-

在本篇文章里小編給大家整理的是一篇關于jQuery/JS監(jiān)聽input輸入框值變化實例內(nèi)容，需要的朋友們學習下。

input事件：

onchange：

1、要在 input 失去焦點的時候才會觸發(fā)；

2、在輸入框內(nèi)容變化的時候不會觸發(fā)change，當鼠標在其他地方點一下才會觸發(fā)；

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("出發(fā)了")
   }
</script>
</head>
<body>
 
  輸入你的密碼: <input type="text" id="password" onchange="change()">
 
</body>

oninput:

1、在用戶輸入時觸發(fā)，它是在元素值發(fā)生變化時立即觸發(fā)；

2、該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時觸發(fā)。

3、缺陷：從腳本中修改值不會觸發(fā)事件。從瀏覽器下拉提示框里選取值時不會觸發(fā)。IE9 以下不支持，所以IE9以下可用onpropertychange 事件代替。

JS: <input type="text" id="password" oninput="change()">

jQuery： $("#password").on('input propertychange', change);

onpropertychange:

1、會實時觸發(fā)，會在元素的屬性改變時就觸發(fā)事件。當元素disable=true時不會觸發(fā)

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('在實時觸發(fā)?。?！')
  　　$('#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" />

以上就是本次介紹的全部相關知識點，感謝大家的學習和對腳本之家的支持。

您可能感興趣的文章: