input 标签实现输入框带提示文字效果(两种方法)

1. 方法一：使用 placeholder 属性

在 HTML5 中，input 标签增加了 placeholder 属性，用于在输入框中显示提示文字。该属性的值会在输入框获得焦点时自动消失。

## 实现方式一：使用 placeholder 属性

1. 使用示例：
```html
<input type="text" placeholder="请输入账号">

1. 实现原理
   通过在 input 标签上设置 placeholder 属性，并为其赋值为要提示的文本，就可以在输入框中显示提示。当用户开始输入内容时，提示文本自动消失。

2. 兼容性
   该方法兼容性较好，以目前主流浏览器为准。

2. 方法二：使用 CSS 实现输入框提示文字

实现方式：通过设置 `position` 属性和相应的元素选择器，利用 CSS `before` 伪元素在输入框前面添加提示文字。

```md
## 实现方式二：使用 CSS 实现输入框提示文字

1. 使用示例：
```html
<div class="input-wrap">
  <input type="text" placeholder="请输入账号">
</div>

.input-wrap {
  position: relative;
}
.input-wrap:before {
  content: "请输入账号";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #999;
  pointer-events: none;
}

1. 实现原理
   通过设置输入框所在的父元素的 position 属性为 relative，并设置其伪元素的样式规则，使输入框前面显示提示文字。在样式规则中，设置伪元素的 content 属性为要提示的文本，使其显示在输入框前面；设置 position 属性为 absolute，使其脱离文档流；设置 pointer-events 属性为 none，使其不响应用户事件，以确保输入框可以正常被操作。

2. 兼容性
   该方法兼容性比较好，可用于绝大部分主流浏览器。

```

以上就是使用 input 标签实现输入框带提示文字效果的两种方法，可以根据具体情况进行选择使用。