Heim > Artikel > Web-Frontend > Beispiel für die JQuery-Überwachung des Eingabewerts in Echtzeit

Beispiel für die JQuery-Überwachung des Eingabewerts in Echtzeit

高洛峰Original: 2017-02-03 14:12:211645Durchsuche

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body id="lia-body"> 
  <div> 
    <div> 
      <label><span>姓名：</span><input type="text" name="fullname"></label> 
      <div></div> 
    </div> 
  </div> 
  <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> 
  <script> 
    $(function(){ 
      var $inputwrapper = $(&#39;#lia-body .lia-content .inputwrapper&#39;); 
      $inputwrapper.find(&#39;input&#39;).on(&#39;input propertychange&#39;,function(){ 
        var result = $(this).val(); 
        console.log(result); 
        $inputwrapper.find(&#39;.result&#39;).html(result); 
      }); 
    }) 
  </script> 
</body> 
</html>

Das Onchange-Triggerereignis muss zwei Bedingungen erfüllen:

1) Die aktuellen Objekteigenschaften ändern sich und es wird durch ein Tastatur- oder Mausereignis ausgelöst (Skriptauslösung ist ungültig)

2) Das aktuelle Objekt verliert den Fokus (onblur);

onpropertychange

Solange sich die Eigenschaften des aktuellen Objekts ändern, ändert sich das Ereignis ausgelöst werden, aber es ist exklusiv für IE;

oninput ist die Nicht-IE-Version von onpropertychange und unterstützt Browser wie Firefox und Opera

Aber der Unterschied besteht darin, dass es an eine gebunden ist Objekt, nicht alle Eigenschaftsänderungen des Objekts können Ereignisse auslösen Nur wenn Es wird nur wirksam, wenn sich der Wert des Objekts ändert.

Dies ist für uns der perfekte Ort, um auf Änderungen des Eingabewerts zu achten.

Das obige Beispiel für die Überwachung des Eingabewerts von Jquery in Echtzeit ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere Beispiele für die Überwachung des Eingabewerts von Jquery in Echtzeit finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js und jquery Echtzeitüberwachung der Methoden oninput und onpropertychange des EingabefeldwertsNächster Artikel：js und jquery Echtzeitüberwachung der Methoden oninput und onpropertychange des Eingabefeldwerts

In Verbindung stehende Artikel

Mehr sehen