input入力ボックスvalueの変更をリアルタイムで傍受するには、次の手順に従います.

HTML 5標準イベントoninputとIE排他的イベントonpropertychangeイベントリアルタイムリスニング入力ボックスvalueの変化
oninputイベントは、ユーザ入力時にトリガーされます.
このイベントは、エレメントの値が変更されたときにトリガーされます.
ヒント:このイベントはonchangeイベントに似ています.異なる点はoninputイベントが要素値が変化するとすぐにトリガーされ、onchangeは要素が焦点を失ったときにトリガーされます.もう1つの違いはonchangeイベントが和要素にも作用することです.

oninput    HTML  ：
        "password">
        "search">
        "text">
        </code></pre> 
 </div> 
 <p>     ：</p> 
 <table style="width: 414px; text-align: center; height: 44px;" border="2" align="left"> 
  <tbody> 
   <tr> 
    <td>Chrome</td> 
    <td>fireFox</td> 
    <td>Safari</td> 
    <td>IE</td> 
    <td>Opera</td> 
   </tr> 
   <tr> 
    <td>Yes</td> 
    <td>4.0+</td> 
    <td>5.0+</td> 
    <td>9.0+</td> 
    <td>Yes</td> 
   </tr> 
  </tbody> 
 </table> 
 <p> </p> 
 <p> </p> 
 <p> </p> 
 <p>  ：</p> 
 <div class="cnblogs_code"> 
  <pre><code><span style="color: #000000;">HTML:
    </span><input type="<span" style="color: #800000;"/>"<span style="color: #800000;">text</span><span style="color: #800000;">"</span> oninput=<span style="color: #800000;">"</span><span style="color: #800000;">onInput()</span><span style="color: #800000;">"</span>><span style="color: #000000;">
    
JavaScript：
    </span><script type="<span" style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>><span style="color: #000000;">
        function onInput() {
          console.log(</span><span style="color: #800000;">"</span><span style="color: #800000;">    ...</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        }
    </span></script><span style="color: #000000;">

 

HTML：
    </span><input type="<span" style="color: #800000;"/>"<span style="color: #800000;">text</span><span style="color: #800000;">"</span>><span style="color: #000000;">
    
JavaScript：
    </span><script type="<span" style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>>
        <span style="color: #0000ff;">var</span> oInput = document.querySelector(<span style="color: #800000;">"</span><span style="color: #800000;">input</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        oInput.oninput </span>=<span style="color: #000000;"> function () {
          console.log(</span><span style="color: #800000;">"</span><span style="color: #800000;">    ...</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        };
    </span></script><span style="color: #000000;">

 

HTML：
    </span><input type="<span" style="color: #800000;"/>"<span style="color: #800000;">text</span><span style="color: #800000;">"</span>><span style="color: #000000;">
    
JavaScript：
    </span><script type="<span" style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">jquery.min.js</span><span style="color: #800000;">"</span>></script>
    <script type="<span" style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>><span style="color: #000000;">
        $(</span><span style="color: #800000;">"</span><span style="color: #800000;">input</span><span style="color: #800000;">"</span>).on(<span style="color: #800000;">"</span><span style="color: #800000;">input</span><span style="color: #800000;">"</span><span style="color: #000000;">, function () {
          console.log(</span><span style="color: #800000;">"</span><span style="color: #800000;">    ...</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        });
    </span></script><span style="color: #000000;">
    
     
    
    </span><script type="<span" style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>>
        <span style="color: #008000;">//</span><span style="color: #008000;">      input propertychange</span>
        $(<span style="color: #800000;">'</span><span style="color: #800000;">input</span><span style="color: #800000;">'</span>).bind(<span style="color: #800000;">'</span><span style="color: #800000;">input propertychange</span><span style="color: #800000;">'</span><span style="color: #000000;">, function() {
            console.log(</span><span style="color: #800000;">"</span><span style="color: #800000;">    ...</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        });
    </span></script></code></pre> 
 </div> 
 <p> </p> 
</div>
                            </div>
                        </div>