Summary of solutions to achieve placeholder effect_jquery

Placeholder is an attribute of html5d5fd7aea971a85678ba271703566ebfd. It provides hint information (hint) that describes the expected value of the input field. The hint will be displayed when the input field is empty. High-end browsers support this attribute (ie10/11 text disappears when focus is obtained), but ie6/7/8/9 does not support it. In order to be compatible with all major browsers and maintain consistent rendering effects, the following three solutions are for reference only.

Option 1:

Abandon the original attribute placeholder, add a sibling node span to the input, and set absolute positioning for the span (the parent node is position: relative;) so that it is located above the input. The html code snippet is as follows:

<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="text" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>
  </div>
</li>
<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="password" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>
  </div>
</li>

The js code is as follows (I simply wrote a function, no plug-in form, haha):

function _placeholderText(phInput, phText) { //定义函数，传递2个参数——input输入框和text提示文本的id或者class
  var $input = $(phInput);
  var $text = $(phText);
  $input.each(function() { //页面加载时遍历所有仿placeholder的input
    var _this = $(this);
    var _text = _this.siblings(phText);
    if($.trim(_this.val()) == '') {
      _this.val("");
      _text.show();
    } else {
      _text.hide();
    }
  });
  $text.on('click', function() { //点击提示信息，input获取焦点
    $(this).siblings(phInput).focus();
  });
  $input.on('input propertychange blur', function() { //为input注册事件，value值改变（其实是属性发生变化）时以及失去焦点时判断value值是否为空
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

_placeholderText('.phInput', '.phText'); //调用函数

Personal summary: Solution 1 is suitable for the login page, but it is not suitable for the background form form and the front-end search page, because it needs to add a new prompt text label, which is not very friendly.

Option 2:

Also abandon the original attribute placeholder and add an attribute phText="mobile phone number/email address" for d5fd7aea971a85678ba271703566ebfd. By default, the value is the prompt text and the color is gray; when d5fd7aea971a85678ba271703566ebfd gets focus, if the value is equal to the phText attribute value, the value is blank; when d5fd7aea971a85678ba271703566ebfd loses focus, if the value is blank, The value value is the prompt text. The js code is as follows:

function inputJsDIY(obj, colorTip, colorTxt) { //定义函数，传递3个参数——DOM对象、提示文本的颜色值、输入文本的颜色值
  colorTip = colorTip || '#aaaaaa';
  colorTxt = colorTxt || '#666666';
  obj.each(function() {
    var _this = $(this);
    _this.css({"color": colorTip}); //输入框颜色默认置为提示文本的颜色值
    if($.trim(_this.val()) == "") { //判断value值是否为空，若为空则value值赋值等于提示文本
      _this.val(_this.attr("phText"));
    } else if(_this.val() != _this.attr("phText")) {
      _this.css({"color": colorTxt}); //正常的输入文本颜色值
    }
  });
  obj.on("focus", function() { //获取焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if(value == _this.attr("phText")) {
      _this.val("");
    }
    _this.css({"color": colorTxt});
  });
  obj.on("blur", function() { //失去焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if($.trim(value) == "") {
      _this.val($(this).attr("phText")).css({"color": colorTip});
    }
  });
  obj.parents("form").on("submit", function() { //提交表单时去除提示文本（把提示文本置空）
    obj.each(function() {
      var _this = $(this);
      if(_this.val() == _this.attr("phText")) {
        _this.val("");
      }
    });
  });
}

inputJsDIY($('.phInput'), '#aaa', '#666'); //调用函数

Personal summary: Option 2 is more suitable for the backend page form and the frontend search page. It is simple to operate and has no additional tags. The disadvantage is that it cannot be used for password type d5fd7aea971a85678ba271703566ebfd, and the prompt text disappears when d5fd7aea971a85678ba271703566ebfd gets focus (when the value is equal to the phText attribute value), which is different from the original placeholder attribute.

In addition, you can also change the phText attribute to the placeholder attribute. Supported browsers will display the original effect. Unsupported browsers will use js to determine {'placeholder' in document.createElement('input')} to call the second option. function. This compromise also has its drawbacks, and the results are not exactly the same across browsers.

Option three:

Write a method for browsers that do not support placeholder. First, assign the placeholder value to d5fd7aea971a85678ba271703566ebfd and set the color to gray. Then when d5fd7aea971a85678ba271703566ebfd gets focus, if it determines that the value value is equal to the placeholder value, move the cursor to Front (this.createTextRange and this.setSelectionRange). When an input operation occurs, the value is first set to null, and then the input value is received. In addition, for 794332e4da1b97221ff0ba8bc66903c4, you need to add an 23efcc05e98690ceeb219581933e4231 to display the prompt text. When an input operation occurs, you need to add 08d1c3e4ca95349cd7a70bc25f6c864dHide, then show 794332e4da1b97221ff0ba8bc66903c4 and give it focus. This solution also has some minor flaws, that is, a bug will appear when pasting with the right mouse button.

Generally speaking, several options have their own advantages and disadvantages. I prefer to use option 1 for the login page. The presentation effect is exactly the same. It is not troublesome to just add a new tab. The background form and the front-end search page prefer option 2, which is simple and effective, except that the prompt text disappears when focus is obtained.

The above is the entire content of this article, I hope you all like it.