文本框字数限制与提示

原创已于 2025-06-27 15:32:43 修改 · 558 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-28 14:52:58 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框字数限制与提示</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: 30px auto;
padding: 25px;
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: 20px;
position: relative;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #34495e;
}
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
min-height: 120px;
resize: vertical;
transition: border-color 0.3s;
}
textarea:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
.char-counter {
text-align: right;
font-size: 14px;
color: #7f8c8d;
margin-top: 5px;
}
.char-counter.warning {
color: #e67e22;
}
.char-counter.error {
color: #e74c3c;
font-weight: bold;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #3498db;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>文本框字数限制与提示</h1>

<div class="form-group">
<label for="message">请输入您的留言 (最多200字)</label>
<textarea id="message" maxlength="200" placeholder="在这里输入您的留言内容..."></textarea>
<div class="char-counter" id="charCounter">
<span id="charCount">0</span>/200
</div>
</div>

<div class="footer">

</div>
</div>

<script>
$(document).ready(function() {
const $textarea = $('#message');
const $charCounter = $('#charCounter');
const $charCount = $('#charCount');
const maxLength = parseInt($textarea.attr('maxlength'));

// 实时计算字符数
$textarea.on('input', function() {
const currentLength = $(this).val().length;
$charCount.text(currentLength);

// 更新计数器样式
updateCounterStyle(currentLength);
});

// 初始化时也计算一次
const initialLength = $textarea.val().length;
$charCount.text(initialLength);
updateCounterStyle(initialLength);

// 更新计数器样式函数
function updateCounterStyle(currentLength) {
const percentage = (currentLength / maxLength) * 100;

$charCounter.removeClass('warning error');

if (currentLength >= maxLength) {
$charCounter.addClass('error');
} else if (percentage >= 80) {
$charCounter.addClass('warning');
}
}

// 防止粘贴超过最大长度的内容
$textarea.on('paste', function(e) {
const pasteData = e.originalEvent.clipboardData.getData('text');
const currentValue = $(this).val();
const newValue = currentValue + pasteData;

if (newValue.length > maxLength) {
e.preventDefault();
const allowedLength = maxLength - currentValue.length;
const trimmedPaste = pasteData.substring(0, allowedLength);

// 手动插入截断后的文本
document.execCommand('insertText', false, trimmedPaste);

// 触发input事件更新计数器
$(this).trigger('input');
}
});
});
</script>
</body>
</html>