js写一个文本框添加提示文本,当单击文本框,里面的默认提示文字会隐藏,鼠标指针离开文本框,里面的文字会显示出来
时间: 2024-10-14 07:03:04 浏览: 31
常用input文本框内容自动垂直居中并默认提示文字单击为空
在JavaScript中,你可以使用`addEventListener`来监听文本框的点击和鼠标移入/移出事件,实现这样的功能。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.placeholder {
color: lightgray;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body>
<input type="text" id="myInput" class="placeholder" placeholder="这是默认提示">
<script>
const input = document.getElementById('myInput');
// 点击文本框时,隐藏提示文字
input.addEventListener('click', function() {
this.classList.remove('placeholder');
});
// 鼠标离开文本框时,显示提示文字
input.addEventListener('mouseout', function() {
if (!this.value) { // 检查是否有输入,没有则显示提示
this.classList.add('placeholder');
}
});
// 鼠标再次进入文本框时,检查输入并决定是否隐藏提示
input.addEventListener('mouseover', function() {
if (!this.value) {
this.classList.remove('placeholder'); // 输入了就不再显示提示
}
});
</script>
</body>
</html>
```
这段代码会在文本框上添加一个半透明的灰色提示文本。当你点击文本框时,提示消失;鼠标离开文本框且输入框未有值时,提示又会显示;再次鼠标移动到输入框内,如果输入了内容,提示将再次隐藏。
阅读全文