首页html中文本框text怎么在底部显示文字，点击输入的时候消失

html中文本框text怎么在底部显示文字，点击输入的时候消失

时间: 2024-09-17 13:05:12 浏览: 164

在HTML中，如果你想在文本框下方显示一些提示文字，当用户开始输入时自动隐藏，通常的做法是结合CSS样式和JavaScript。下面是一个简单的例子：首先，在HTML里创建一个文本框和一个段落作为提示： ```html <!DOCTYPE html> <html lang="zh-CN"> <body> <input type="text" id="myInput" onfocus="this.value='';" onblur="if (this.value == '') {this.style.display='none';}" placeholder="请输入内容..."> <p id="promptText">请输入您的内容...</p> </body> </html> ``` 然后，在CSS中设置初始状态和聚焦状态下的提示文字位置： ```css #promptText { display: block; position: absolute; bottom: 10px; /* 根据需求调整位置 */ left: 50%; transform: translateX(-50%); color: #999; /* 文字颜色 */ } input:focus ~ #promptText { display: none; /* 当输入框获得焦点时，隐藏提示文字 */ } ``` 在这个例子中，当你点击文本框时，它会失去焦点（onblur），如果此时文本框内没有内容，提示文字（id="promptText"）会因为display属性变为"none"而隐藏起来。当再次聚焦时，提示文字又会显示出来。

阅读全文