jquery text文本框文字提示鼠标点击输入内容文字提示消失

原创已于 2025-06-27 15:36:39 修改 · 269 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-25 17:51:43 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Box Placeholder with jQuery</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 简单的样式调整 */
#textBox {
width: 300px;
padding: 10px;
font-size: 16px;
}
.placeholder {
color: #aaa;
}
</style>
</head>
<body>

<input type="text" id="textBox" value="请输入内容" class="placeholder">

// 当文本框获得焦点时
$textBox.focus(function() {
// 如果文本框内有提示文字，则清空并移除提示文字样式
if ($(this).val() === '请输入内容') {
$(this).val('').removeClass('placeholder');
}
});

// 当文本框失去焦点时
$textBox.blur(function() {
// 如果文本框为空，则添加提示文字并应用提示文字样式
if ($(this).val() === '') {
$(this).val('请输入内容').addClass('placeholder');
}
});

// 示例：点击此链接不会改变文本框状态，但展示如何嵌入一个链接
$('body').append('访问');
});
</script>
</body>
</html>