phillipbentonkelly of RAMP - Front End
3/21/2014 - 6:52 PM

Quick Form Input Text Placeholder(JS)

Quick Form Input Text Placeholder(JS)

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>

<script>
  $(function(){
    var inputPlaceholder = inputFocusPlaceholderScript();
    inputPlaceholder.registerInput('ezsearch-string', 'search');
  });
</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.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];
          }
        };
      }
    };
})();