多行TextArea每行30字符自动换行需求及代码问题排查

我看了你当前的代码，问题出在处理过长行的拆分逻辑上——当你粘贴超过30字符的内容时，原代码在拆分行和拼接下一行内容的步骤里，错误地跳过了部分字符，导致下一行的首字符被截断。咱们来修正这个逻辑：

首先梳理下原代码的核心问题：

• 查找空格的循环范围不合理，容易错过合适的拆分位置
• 拼接下一行内容时的逻辑有误，导致首字符意外丢失
• 没有处理无空格的超长单词（超过30字符）的极端情况

试试这个修正后的代码，它能完美实现每行最多30字符、自动换行且不截断内容的需求（优先在空格处拆分避免截断单词，无空格则强制在30字符处拆分）：

<textarea id="textareainput"></textarea>

<script>
const input = document.getElementById("textareainput");

// 监听输入事件，手动输入或粘贴都会触发
input.addEventListener("input", handleAutoWrap);

function handleAutoWrap() {
    const originalValue = input.value;
    const cursorStart = input.selectionStart;
    const cursorEnd = input.selectionEnd;
    
    let processedLines = [];
    const lines = originalValue.split("\n");
    
    for (let currentLine of lines) {
        // 循环处理当前行，直到它长度≤30
        while (currentLine.length > 30) {
            // 找前30个字符里的最后一个空格，优先在单词间拆分
            let splitPosition = currentLine.lastIndexOf(" ", 29);
            // 如果没有空格，就强制在30字符处拆分
            if (splitPosition === -1) splitPosition = 30;
            
            // 把拆分出的部分加入结果数组
            processedLines.push(currentLine.substring(0, splitPosition));
            // 处理剩余内容：如果拆分在空格处，跳过这个空格再继续
            currentLine = splitPosition < currentLine.length && currentLine[splitPosition] === " " 
                ? currentLine.substring(splitPosition + 1) 
                : currentLine.substring(splitPosition);
        }
        // 把处理完的短行加入结果
        processedLines.push(currentLine);
    }
    
    // 更新textarea的内容
    input.value = processedLines.join("\n");
    
    // 恢复光标位置，保证输入流畅性
    input.setSelectionRange(cursorStart, cursorEnd);
}
</script>

代码细节说明： #

• 用input事件监听所有输入行为，覆盖手动打字、粘贴、拖拽输入等场景
• 优先在单词间的空格处拆分，避免破坏语义；无空格时强制截断，保证每行长度不超标
• 处理完后恢复光标位置，不会打乱用户的输入节奏

这样修改后，粘贴长内容时就不会再出现下一行首字符被截断的问题了，完全满足你提出的两个需求。

内容的提问来源于stack exchange，提问作者Sreekanth V S