Convert a plain text field into a search field with focus/blur behavior

makeSearchInput.js

/**
Turn a text input into a search input with added behavior
On focus, if input value is the same as defaultValue, replace with blank
On blur, if input value is empty or full of whitespace replace with defaultValue

@param input {HTMLInputElement} element to behave as search input
@param defaultValue {String} string to be default value of the input 
**/
function makeSearchInput(input, defaultValue){
	input.setAttribute("data-default", defaultValue);
	input.setAttribute("value", input.getAttribute("data-default"))

	input.addEventListener("focus", function(e){
		if (input.value == input.getAttribute("data-default"))
			input.value = "";

	}, false);

	input.addEventListener("blur", function(e){

		if (!input.value.length || !q.value.replace(/\s/,"").length)
			input.value = input.getAttribute("data-default")

	}, false);
}