JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<input type="search" value="Search...">

JavaScript

$(document).ready(function(e){
    
    // loop through each input type=search
    $('input[type=search]').each(function(){
        
        // create an attribute called data-default and add the current value to it
        $(this).attr('data-default', $(this).val() );
        
    });
    
    
    // when you focus on the search input
    $('input[type=search]').on('focus',function(e){
        
        // if the value is the same as the default value
        if( $(this).val() == $(this).attr('data-default') )
        {
            // make the value blank
            $(this).val('');
        }
        
    // when you move out of the search input
    }).on('blur',function(e){
        
        // if there is no value (blank)
        if( !$(this).val() )
        {
            // add back the default value
            $(this).val( $(this).attr('data-default') );
        }
    });
});