溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery/JS如何監(jiān)聽input輸入框的值

發(fā)布時(shí)間：2021-06-15 14:02:30 來源：億速云 閱讀：509 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)jQuery/JS如何監(jiān)聽input輸入框的值的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

input事件：

onchange：

1、要在 input 失去焦點(diǎn)的時(shí)候才會(huì)觸發(fā)；

2、在輸入框內(nèi)容變化的時(shí)候不會(huì)觸發(fā)change，當(dāng)鼠標(biāo)在其他地方點(diǎn)一下才會(huì)觸發(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、在用戶輸入時(shí)觸發(fā)，它是在元素值發(fā)生變化時(shí)立即觸發(fā)；

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

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

JS: <input type="text" id="password" oninput="change()">
jQuery： $("#password").on('input propertychange', change);

onpropertychange:

1、會(huì)實(shí)時(shí)觸發(fā)，會(huì)在元素的屬性改變時(shí)就觸發(fā)事件。當(dāng)元素disable=true時(shí)不會(huì)觸發(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('在實(shí)時(shí)觸發(fā)?。。?#39;)
  　　$('#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" />

感謝各位的閱讀！關(guān)于“jQuery/JS如何監(jiān)聽input輸入框的值”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手