Jquery real time listening input value example

  • 2021-07-16 01:10:57
  • OfStack

Examples are as follows:


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

onchange triggering events must meet two conditions:

1) The property of the current object has changed and is triggered by a keyboard or mouse event (script trigger is invalid)

2) The current object loses focus (onblur);

onpropertychange

Events are triggered whenever the properties of the current object change, but it is IE-specific;

oninput is a non-IE version of onpropertychange and supports browsers such as firefox and opera

However, when it is bound to an object, not all property changes of the object can trigger an event, but only when the value value of the object changes.

This is where we listen for changes to input and value.


Related articles: