返回

让ie9中的placeholder起死回生

前端

<p></p>

<p>placeholder属性给予了用户很友好的提示，但在老版本的浏览器中就不会起作用（Internet Explorer 9、Internet Explorer 10）。虽然目前大部分浏览器都支持，但IE9的使用人群还是很大的，我们不能放弃对他们服务，所以，这里提供了在IE9中使用placeholder的方法。</p>

<p></p>

<p></p>

<h2>placeholder的用法</h2>

<p>placeholder属性的语法非常简单，直接在元素中添加placeholder属性，并在属性中指定要显示的提示文字即可。例如：</p>

```html
<input type="text" placeholder="请输入您的名字">

这段代码将创建一个文本输入框，并在文本输入框中显示“请输入您的名字”的提示文字。当用户点击文本输入框时，提示文字就会消失，用户可以开始输入自己的名字。

解决办法

要在IE9中使用placeholder属性，我们可以使用一些解决办法。其中一种方法是使用HTML5 Shiv。HTML5 Shiv是一个JavaScript库，它可以为旧版本的浏览器添加对HTML5新特性（包括placeholder属性）的支持。为了使用HTML5 Shiv，我们需要在页面的<head>标签中添加以下代码：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

另一种方法是使用jQuery库。jQuery库是一个JavaScript库，它可以使我们更轻松地操作DOM元素。为了使用jQuery库，我们需要在页面的<head>标签中添加以下代码：

<script src="jquery.js"></script>

然后，我们可以使用以下JavaScript代码来实现placeholder属性的功能：

$(function() {
  // 获取所有具有placeholder属性的文本输入框
  var inputs = $("[placeholder]");

  // 遍历所有文本输入框
  inputs.each(function() {
    // 获取当前文本输入框的placeholder属性值
    var placeholder = $(this).attr("placeholder");

    // 为当前文本输入框添加一个class
    $(this).addClass("placeholder");

    // 在当前文本输入框中创建一个label元素
    $(this).before("<label class='placeholder-label' for='" + $(this).attr("id") + "'>" + placeholder + "</label>");

    // 当当前文本输入框获得焦点时，隐藏label元素
    $(this).focus(function() {
      $(this).prev(".placeholder-label").hide();
    });

    // 当当前文本输入框失去焦点时，显示label元素
    $(this).blur(function() {
      if ($(this).val() === "") {
        $(this).prev(".placeholder-label").show();
      }
    });
  });
});

以上两种方法都可以实现placeholder属性在IE9中的兼容性。大家可以根据自己的需要选择合适的方法。

除了以上两种方法，还有一些其他的解决办法。例如，我们可以使用CSS3的:placeholder-shown伪类来实现placeholder属性的功能。但是，这种方法只适用于支持CSS3的浏览器。因此，在实际应用中，我们还是建议使用HTML5 Shiv或jQuery库来实现placeholder属性在IE9中的兼容性。