Example of Jquery monitoring input value in real time-JS Tutorial-php.cn

Example of Jquery monitoring input value in real time

高洛峰

Release： 2017-02-03 14:12:21

Original

1679 people have browsed it

Examples are as follows:

<!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>

Copy after login

The onchange trigger event must meet two conditions:

1) The properties of the current object change and are triggered by keyboard or mouse events (script triggering is invalid)

2) The current object loses focus (onblur);

onpropertychange

As long as the properties of the current object change, the event will be triggered, but it is exclusive to IE;

oninput is the non-IE version of onpropertychange, supporting browsers such as firefox and opera

But the difference is that when it is bound to an object, not all property changes of the object can trigger events, only when the object It will only take effect when the value value changes.

This is a perfect place for us to monitor changes in input value.

The above example of Jquery monitoring input value in real time is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more related articles about Jquery real-time monitoring of input value, please pay attention to the PHP Chinese website!