JSFiddle - React, Tailwind, and code Playground

by Tyler N.

HTML

<input class="search-bar" placeholder="" />
<button>Submit</button>

JavaScript

$(function() {
  // clearing and resetting placeholder text on focus
  $('.search-bar').focus(function() {
      if($(this).attr('placeholder') == 'search') {
      $('.search-bar').attr('placeholder', '').val('');
    }
  });
  $('.search-bar').blur(function() {
    if($(this).val().trim().length === 0) {
      $('.search-bar').val('').attr('placeholder', 'search');
    }
  });

  $('button').click(function() { alert($('.search-bar').val()); });
});