JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<input type="text" title="you're an idiot" value="" />

JavaScript

$(document).ready(function() {

  // jQuery uses implicit iteration. 
  // That means the each() call is unnecessary
  $("input[title]").bind( "blur focus", function( event ) {
    
    // OH SNAP! I bound both events in one call!
    var $this = $(this), 
        value = $this.val(), 
        title = $this.attr("title"), 
    // Handler object, it has rules.
        handler = {
            "blur": ( !value && title ) || value , 
            "focus": ( value !== title && value ) || ""
        };
    
    // Reset the value
    $this.val( handler[ event.type ] );
      
  }).val( function() {
    var $this = $(this);

    return $this.val() || $this.attr("title");
  });    

});