详细介绍：javascript文本长度检测与自动截取，用于标题长度检测

实时检测的效果，比较友好。

设计思路

• 创建一个文本输入区域

• 实时显示当前文本长度和最大允许长度

• 当长度超过90时自动截取文本

• 提供视觉反馈（进度条和颜色提示）

• 实现代码

文本长度检测与截取工具
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 600px;
padding: 30px;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 25px;
font-weight: 600;
}
.input-container {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 150px;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
resize: vertical;
transition: border-color 0.3s;
}
textarea:focus {
outline: none;
border-color: #3498db;
}
.counter {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
color: #555;
}
.progress-container {
height: 8px;
background: #f0f0f0;
border-radius: 4px;
margin-top: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: #3498db;
border-radius: 4px;
transition: width 0.3s, background 0.3s;
}
.warning {
color: #e74c3c;
font-weight: 500;
}
.rules {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
font-size: 14px;
color: #555;
}
文本长度检测与截取
当前长度: 0/90
计算规则: 汉字=3个单位，半角字符=1.5个单位，其他字符=2个单位
const textInput = document.getElementById('textInput');
const currentLengthElement = document.getElementById('currentLength');
const progressBar = document.getElementById('progressBar');
const warningText = document.getElementById('warningText');
// 计算字符串长度（汉字=3，半角字符=1.5，其他=2）
function calculateLength(str) {
let totalLength = 0;
for (let i = 0; i = 0x4E00 && charCode = 0x0000 && charCode = 0x4E00 && charCode = 0x0000 && charCode  maxLength) {
break;
}
result += char;
currentLength += charLength;
}
return result;
}
// 更新界面显示
function updateDisplay() {
const text = textInput.value;
const length = calculateLength(text);
// 更新长度显示
currentLengthElement.textContent = length.toFixed(1);
// 更新进度条
const percentage = Math.min(100, (length / 90) * 100);
progressBar.style.width = percentage + '%';
// 更新警告文本和颜色
if (length > 90) {
currentLengthElement.className = 'warning';
progressBar.style.background = '#e74c3c';
warningText.textContent = '文本已超过限制，已自动截取';
warningText.className = 'warning';
// 截取文本
const truncatedText = truncateString(text, 90);
textInput.value = truncatedText;
// 更新显示为截取后的长度
const newLength = calculateLength(truncatedText);
currentLengthElement.textContent = newLength.toFixed(1);
progressBar.style.width = Math.min(100, (newLength / 90) * 100) + '%';
} else {
currentLengthElement.className = '';
progressBar.style.background = '#3498db';
warningText.textContent = '';
}
}
// 添加输入事件监听
textInput.addEventListener('input', updateDisplay);
// 初始化显示
updateDisplay();

通过代码能够直接运行！！~~~！！！

功能说明

1. 实时长度计算：在输入或粘贴文本时，实时计算文本长度（汉字=3，半角字符=1.5，其他字符=2）

2. 自动截取：当文本长度超过90时，自动截取文本到合适长度

3. 视觉反馈：

   • 进度条显示当前文本长度占比

   • 颜色变化提示（蓝色正常，红色超过限制）

   • 显示警告信息当文本超过限制时

使用方法

1. 在文本框中输入或粘贴文本

2. 观察实时长度计算和进度条变化

3. 当长度超过90时，文本会自动截取到合适长度