Quick Form Input Text Placeholder(JS)
var inputFocusPlaceholderScript = {};
(function(){
var $ = jQuery;
var gVars = {};
inputFocusPlaceholderScript = function(){
if( !(this instanceof inputFocusPlaceholderScript))
return new inputFocusPlaceholderScript();
this.registeredInputs = [];
this.registeredInputsValues = [];
this.placeholderText = [];
};
inputFocusPlaceholderScript.prototype = {
registerInput: function( inputId, placeholderText ){
if(this.registeredInputs.indexOf(inputId) < 0){
if(document.getElementById(inputId).value !== '' || document.getElementById(inputId).value !== null || document.getElementById(inputId).value !== 'undefined'){
var regObj = document.getElementById(inputId);
this.registeredInputs.push(inputId);
this.registeredInputsValues.push(regObj.value);
if(typeof(placeholderText) !== 'undefined'){
this.placeholderText.push(placeholderText);
}else{
this.placeholderText.push('');
}
this.registerOnFocusEvent(document.getElementById(inputId), inputId, this.registeredInputsValues.indexOf(regObj.value));
this.registerOffBlurEvent(document.getElementById(inputId), inputId, this.registeredInputsValues.indexOf(regObj.value));
}
}else{
console.log("This input has already been logged.");
}
},
registerOnFocusEvent: function(object, idString, regIndex){
var thisRef = this;
object.onfocus = function(){
if(object.value === thisRef.registeredInputsValues[regIndex]){
object.value = '';
}
};
},
registerOffBlurEvent: function(object, idString, regIndex){
var thisRef = this;
object.onblur = function(){
if(object.value === '' || object.value === null || object.value === 'undefined' || object.value === thisRef.placeholderText[regIndex]){
object.value = thisRef.registeredInputsValues[regIndex];
}
};
}
};
})();
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Quick Form Input Text Placeholder(JS)" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ez-searchMod-searchBox">
<form>
<input type="text" name="q" id="ezsearch-string" value="tom" />
</form>
</div>
</body>
</html>
.ez-searchMod-searchBox{}
.ez-searchMod-searchBox #ezsearch-string {
width: 100%;
min-width: 290px;
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 14px;
line-height: 16px;
vertical-align: middle;
}
.ez-searchMod-searchBox #ezsearch-string {
width: 100%;
max-width: 325px;
min-height: 26px;
max-height: 26px;
border: solid 1px;
background-color: #EFEFEF;
color: #888783;
font-family: "Oswald", sans-serif;
font-size: 15px;
font-weight: 300;
}