jQuery 文本框文字提示效果

ziblog

已于 2025-06-27 15:30:44 修改

阅读量631

点赞数 11

CC 4.0 BY-SA版权

文章标签： html 前端

于 2025-04-28 17:02:45 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147591416

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 文本框文字提示效果</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #34495e;
}
.text-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: all 0.3s;
}
.text-input:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.placeholder-text {
color: #95a5a6;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>文本框文字提示效果</h1>

<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" class="text-input" value="请输入用户名">
</div>

<div class="form-group">
<label for="email">电子邮箱</label>
<input type="text" id="email" class="text-input" value="请输入您的电子邮箱">
</div>

<div class="form-group">
<label for="message">留言内容</label>
<textarea id="message" class="text-input" rows="4">请在此输入您的留言内容...</textarea>
</div>

<div class="footer">

</div>
</div>

<script>
$(document).ready(function() {
// 为所有文本框和文本域添加初始样式
$('input[type="text"], textarea').each(function() {
if ($(this).val() === $(this).attr('placeholder') || $(this).val().match(/^请输入|请在此输入/)) {
$(this).addClass('placeholder-text');
}
});

// 获取焦点时移除提示文字和样式
$('input[type="text"], textarea').on('focus', function() {
if ($(this).hasClass('placeholder-text')) {
$(this).val('').removeClass('placeholder-text');
}
});

// 失去焦点时如果为空，恢复提示文字
$('input[type="text"], textarea').on('blur', function() {
if ($(this).val().trim() === '') {
var placeholderText = '';

if ($(this).is('#username')) {
placeholderText = '请输入用户名';
} else if ($(this).is('#email')) {
placeholderText = '请输入您的电子邮箱';
} else if ($(this).is('#message')) {
placeholderText = '请在此输入您的留言内容...';
}

$(this).val(placeholderText).addClass('placeholder-text');
}
});

// 表单提交时检查是否还是提示文字
$('form').on('submit', function() {
$('input[type="text"], textarea').each(function() {
if ($(this).hasClass('placeholder-text')) {
$(this).val('');
}
});
});
});
</script>
</body>
</html>