phillipbentonkelly
3/21/2014 - 5:21 PM

Quick Form Input Text Placeholder(JS)

Quick Form Input Text Placeholder(JS)

inputFocusPlaceholderScript.js
content_copyfile_download
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];
          }
        };
      }
    };
})();
inputFocusPlaceholderScript.html
content_copyfile_download
<!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>
inputFocusPlaceholderScript.css
content_copyfile_download
.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;
}