JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search_string" value="Search by site name or site id..."/>

JavaScript

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    };
  }
}

addLoadEvent(function() {
    document.getElementById("search_string").onfocus = search_field_focus;
});

function search_field_focus() {
	var d = document.getElementById("search_string");
	var default_value = "Search by site name or site id...";
	
	if (d.value == default_value) {
		// set cursor position to start
		setCaretPosition(d.id, 0);
	}
	
	d.onblur = function() { 
		if (d.value == '' || d.value == null)
		{
			d.value = default_value;
		}
	}
}

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}