在前端开发中，输入框的占位符是一个非常重要的功能。它可以让用户更加直观地了解输入框的预期内容，并且减少错误输入的概率。但是，在早期版本的 Internet Explorer 中，输入框的占位符并不支持原生实现。本文将介绍如何通过 JavaScript 和 CSS 实现 Internet Explorer 中的输入占位符。
使用 JavaScript 实现 IE 输入占位符
我们可以使用 JavaScript 在 Internet Explorer 中模拟输入占位符的效果。具体步骤如下：
- 给输入框设置一个默认值（即占位符），并改变其颜色。
- 当输入框获得焦点时，清空输入框内容并改变其颜色。
- 当输入框失去焦点时，如果输入框内容为空，则还原占位符。
示例代码如下：
<input type="text" id="input" value="请输入用户名" style="color: #999;" onfocus="if(this.value === '请输入用户名') {this.value = ''; this.style.color = '#000';}" onblur="if(this.value === '') {this.value = '请输入用户名'; this.style.color = '#999';}">以上代码会在输入框中显示 "请输入用户名" 的占位符，并在输入框获得或失去焦点时改变颜色。这种方法虽然能够实现输入占位符的效果，但是需要在每个输入框中都添加一遍这段代码，不太方便。
使用 CSS 实现 IE 输入占位符
我们也可以使用 CSS 在 Internet Explorer 中实现输入占位符的效果。具体步骤如下：
- 给输入框设置一个默认值（即占位符）。
- 通过样式表将输入框的文本颜色设置为灰色。
- 设置
:focus伪类选择器，当输入框获得焦点时，将其文本颜色设置为黑色，并清空输入框内容。
示例代码如下：
-- -------------------- ---- -------
-------
----------------------------------------- - -- ----- --
------ -----
-
----------------------------------------------- - -- ----- --
------ -----
-
--------
------ ----------- ---------- ---------------------以上代码会在输入框中显示 "请输入用户名" 的占位符，并在输入框获得或失去焦点时改变颜色。这种方法只需要在样式表中设置一次，就能够应用到所有的输入框中。
总结
在 Internet Explorer 中实现输入占位符需要使用 JavaScript 或 CSS 进行模拟，但两者实现的方式略有不同。JavaScript 的实现方式需要在每个输入框中添加一遍代码，而 CSS 的实现方式只需要在样式表中设置一次。无论使用哪种方法，都能够帮助用户更加直观地了解输入框的预期内容，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9404
