JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="post" id="searchForm" class="search_sku">
<input class="input" type="search" id="keyword" name="keyword" autocomplete="off" data-placeholder="text default" value=""/>
<input class="submit" type="button" id="searchFormButton" name="" value=""/>
<div id="error2" style="color:red;opacity:0">Enter a number</div>

JavaScript

$(function() {
  $("[data-placeholder]").focus(function() {
    if ( this.value == this.getAttribute( 'data-placeholder' ) ) {
      this.value = "";
      $(this).css("color","#040404");   
    }
  }).blur(function() {
    if ( this.value == "" ) {
      this.value = this.getAttribute( 'data-placeholder' );
      $(this).css("color","#858585");
    }
  }).blur();
});

$('#searchFormButton').click(function(){$('#searchForm').submit()})
$('#searchForm').submit(submitSearchForm)
function submitSearchForm() {
  var input=$('#keyword');
  var str = input.val().replace(/\D/g, '');
  if(str===""){
    $('#error2').animate({opacity:'1'}); // показать div с ошибкой
    input.val(input.attr("data-placeholder") );
    return false;
  }
 input.val(str);
 return true
}