实现placeholder效果的方案汇总

前端技术 2023/09/04 JavaScript

placeholder是html5<input>的一个属性，它提供可描述输入字段预期值的提示信息（hint）， 该提示会在输入字段为空时显示。高端浏览器支持此属性（ie10/11在获得焦点时文字消失），ie6/7/8/9则不支持。为了兼容各主流浏览器并使其呈现效果保持一致，以下三套方案仅供参考。

方案一：

摒弃原始属性placeholder，为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。html代码片段如下：

<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>

js代码如下（简单写了个函数，没写插件形式，呵呵）：

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\'); //调用函数

个人总结：方案一适用于登录页面，但对于后台form表单及前台的搜索页面不太适合，因为要增加新的提示文本标签，不太友好。

方案二：

同样摒弃原始属性placeholder，为<input>添加一个属性phText=\"手机号码/邮箱地址\"。默认状态下，value值为提示文本并且颜色为灰色；<input>获得焦点时，若value值等于phText属性值，则value值置空；<input>失去焦点时，若value值为空，则value值为提示文本。js代码如下：

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\'); //调用函数

个人总结：方案二比较适合后台页面form表单及前台搜索页面，操作简单，无附加标签。缺点是不能用于password类型的<input>，而且<input>获得焦点时的提示文本消失（value值等于phText属性值时），这一点与原始的placeholder属性不同。

另外，也可以把phText属性改为placeholder属性，支持的浏览器呈现原始效果，不支持的浏览器通过js判断{\'placeholder\' in document.createElement(\'input\')}调用方案二中的函数。此折中方案也有其缺点，各浏览器呈现的效果不完全一样。

方案三：

为不支持placeholder的浏览器写一个方法，首先把placeholder值赋给<input>并且颜色置为灰色，然后<input>获得焦点时判断value值等于placeholder值的话，把光标移至最前面（this.createTextRange和this.setSelectionRange）。当发生输入操作时，先把value值置为空，然后再接收输入值。另外，对于<input type=\"password\">要为其新增一个<input type=\"text\">用来显示提示文本，当发生输入操作时，需要把<input type=\"text\">隐藏，然后把<input type=\"password\">显示出来并让其获得焦点。此方案也有一些小缺陷，那就是当用鼠标右键粘贴时会出现bug。

总体上来讲，几种方案各有优缺点。登录页面我更倾向于使用方案一，呈现效果完全一致，仅仅是增加个新标签也不算麻烦。后台form表单和前台搜索页面更倾向于方案二，简单有效，只是在获得焦点时提示文本消失。

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/9169

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案