JSFiddle - React, Tailwind, and code Playground

by bogdan_vq

HTML

<div id="pp" style="height: 500px; width: 100%; background-color: #ddc;">
<p>


<input id="tt" type="text"/>
</p>  
  <ul id="mm"></ul>
 
  </div>
</div>


<div class="inputs">
  <!-- <p>
    <input type="text"><br>
    <input type="text">
  </p>
  <p>
    <input type="password">
  </p> -->
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
<input type="hidden" id="hi"/>
 
<script>
var focus = 0,
  blur = 0;
$( "input" )
  .focusout(function() {
    focus++;
    $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
  })
  .blur(function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
  });
</script>

CSS

.inputs {
    float: left;
    margin-right: 1em;
  }
  .inputs p {
    margin-top: 0;

JavaScript

$(document.body).on('click touchstart', function(e){
console.log(e.target.nodeName);
 //e.preventDefault();
 //return false;
 $('input').trigger('focusout');
 
 $('#mm').append("<li>" + 'click touchstart' +"</li>")
 });

$("#tt").on('blur', function(){
 
 console.log("blur");
 $('#mm').append("<li>" + 'blur' +"</li>")
 
 });
 
 
  $("input").focusout(function(){
 
 console.log("focusout");
 $('#mm').append("<li>" + 'focus' +"</li>")
 
 });