基于JS实现html中placeholder属性提示文字效果示例

下面是基于JS实现html中placeholder属性提示文字效果示例的攻略，分为以下5个步骤：

步骤1：HTML结构

首先我们需要在HTML中添加input标签，同时给该标签添加placeholder属性，示例如下：

<input type="text" placeholder="请输入用户名" />

步骤2：CSS样式

我们需要为placeholder文本添加CSS样式，可以使用伪元素（:placeholder-shown）来实现，具体代码如下：

input::placeholder {
  color: #999;
}
input:placeholder-shown {
  font-style: italic;
}

步骤3：实现兼容IE浏览器的方法

IE浏览器不支持使用伪元素来控制placeholder文本样式，因此需要进行额外的操作，在JS中实现：

function isIE() {
  return /Trident/.test(navigator.userAgent);
}

if (isIE()) {
  var inputList = document.querySelectorAll("input[placeholder]");
  for (var i = 0; i < inputList.length; i++) {
    var input = inputList[i];
    input.value = input.getAttribute("placeholder");
    input.style.color = "#999";
    input.style.fontStyle = "italic";
    input.onfocus = function () {
      if (this.value === this.getAttribute("placeholder")) {
        this.value = "";
        this.style.color = "#333";
        this.style.fontStyle = "normal";
      }
    };
    input.onblur = function () {
      if (this.value === "") {
        this.value = this.getAttribute("placeholder");
        this.style.color = "#999";
        this.style.fontStyle = "italic";
      }
    };
  }
}

步骤4：添加JavaScript代码

如果想要进一步改进效果，可以使用JavaScript代码实现鼠标交互效果。具体代码如下：

var inputList = document.querySelectorAll("input[placeholder]");
for (var i = 0; i < inputList.length; i++) {
  var input = inputList[i];
  input.onfocus = function () {
    this.classList.add("focus");
  };
  input.onblur = function () {
    this.classList.remove("focus");
  };
}

步骤5：完整代码示例

最后，我们将上述步骤中的代码整合在一起，完整示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于JS实现html中placeholder属性提示文字效果示例</title>
  <style>
    input::placeholder {
      color: #999;
    }
    input:placeholder-shown {
      font-style: italic;
    }
    input.focus::placeholder {
      color: transparent;
    }
    input.focus:placeholder-shown {
      font-style: normal;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="请输入用户名">
  <input type="password" placeholder="请输入密码">
  <script type="text/javascript">
    function isIE() {
      return /Trident/.test(navigator.userAgent);
    }
    if (isIE()) {
      var inputList = document.querySelectorAll("input[placeholder]");
      for (var i = 0; i < inputList.length; i++) {
        var input = inputList[i];
        input.value = input.getAttribute("placeholder");
        input.style.color = "#999";
        input.style.fontStyle = "italic";
        input.onfocus = function () {
          if (this.value === this.getAttribute("placeholder")) {
            this.value = "";
            this.style.color = "#333";
            this.style.fontStyle = "normal";
          }
        };
        input.onblur = function () {
          if (this.value === "") {
            this.value = this.getAttribute("placeholder");
            this.style.color = "#999";
            this.style.fontStyle = "italic";
          }
        };
      }
    }
    var inputList = document.querySelectorAll("input[placeholder]");
    for (var i = 0; i < inputList.length; i++) {
      var input = inputList[i];
      input.onfocus = function () {
        this.classList.add("focus");
      };
      input.onblur = function () {
        this.classList.remove("focus");
      };
    }
  </script>
</body>
</html>

以上就是基于JS实现html中placeholder属性提示文字效果示例的完整攻略啦！

补充两个示例说明：

示例1：修改输入框聚焦时的文字颜色和样式

input.focus::placeholder {
  color: transparent;
}
input.focus:placeholder-shown {
  font-style: normal;
}

如上代码所示，当输入框获得焦点时，我们通过给input标签添加focus类来修改placeholder文本的样式，让文本变得清晰可见。

示例2：修改鼠标悬停时的背景颜色

添加如下代码：

input:hover {
  background-color: #f2f2f2;
}

这样当鼠标悬停在输入框上时，会出现背景色变深的效果，使得整个页面的视觉效果更加美观。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS实现html中placeholder属性提示文字效果示例 - Python技术站