SoFunction
Updated on 2025-04-03

How to use native JS to listen to input box input values ​​in real time

Native JS real-time listening to input box input value

Oninput, onpropertychange, onchange can be used in native JS

oninput, onpropertychange, usage of onchange

1) The onchange trigger event must meet two conditions:

  • a) The current object attributes are changed and are fired by keyboard or mouse events (the script trigger is invalid)
  • b) The current object loses focus (onblur);

2) onpropertychange, an event will be triggered as long as the current object property changes, but it is exclusive to IE;

3) oninput is a non-IE browser version of onpropertychange, which supports browsers such as firefox and opera, but there is a little difference. When it is bound to an object, not all properties of the object can trigger events. It only works when the object value changes.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        Please enter characters：<input type="text" id='d0'/>
        <hr />
        The character you entered is: <div id='d1'></div>
        
        <script>
            var input = ('d0')
            
            var div = ('d1');
             = function(){
                 = ;
            }
 
        </script>
    </body>
</html>

Native JS input[type=range] listen value changes

<input  type="range"  oninput="densityInput(event)" onpropertychange="OnPropChanged(event)">
//js

 function OnInput (event) {
    ();
  }
  // Internet Explorer 
  function OnPropChanged (event) {
      if ( () == "value") {
          ();
      }
  }

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.