css 快速表单输入文本占位符（JS）

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 快速表单输入文本占位符（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;
}

以上是关于css 快速表单输入文本占位符（JS）的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 表单文本占位符 - 它们有 CSS 伪类吗？

Tailwind CSS 更改占位符选项的文本颜色

css 表单占位符文本

css 搜索表单占位符文本