HTML如何限制字符串长度并实现textarea输出内容对齐

解决方案 #

你要实现的对齐效果可以通过固定地址字段的输出长度实现，textarea默认使用等宽字体，只要将地址补全到固定长度（和你设置的最大输入长度一致即可），不足部分用空格填充，就能保证后续的姓名字段始终在同一位置对齐。
核心修改点：

• 新增字符串固定长度填充函数，不足长度自动在末尾补空格
• 修复原代码中的JS语法错误、HTML标签嵌套错误
• 每次提交将新条目追加到textarea，而非覆盖原有内容（如果需要覆盖可以自行修改逻辑）

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<script>
// 字符串填充到指定长度，不足补空格
function padString(str, length) {
    if (str.length >= length) return str.slice(0, length);
    return str + ' '.repeat(length - str.length);
}

function IV() {
    var fname = document.getElementById("fname").value;          
    var lname = document.getElementById("lname").value;
    var address = document.getElementById("address").value;
    // 地址固定占50字符宽度，可根据需求调整数值
    const paddedAddress = padString(address, 50);
    // 拼接输出内容
    var newLine = `Please find the address of ${paddedAddress} of ${fname} ${lname}\n`;
    // 追加到textarea，保留之前的条目，如果需要覆盖直接把+=改成=即可
    document.getElementById('spanResult').textContent += newLine;
    // 提交后清空输入框，可选
    document.getElementById("fname").value = '';
    document.getElementById("lname").value = '';
    document.getElementById("address").value = '';
}
</script>
</head>
<body> 
<header>
    <h1>SNA fname - IV</h1>
</header>
<form>
<table> 
    <tbody> 
        <tr> 
            <td align="middle" colspan="2"> 
            </td> 
        </tr> 
        <tr> 
            <td width="24%" style="width: 20%"> 
               First name :
            </td> 
            <td> 
                <input id="fname" size="30" name="fname" maxlength="30" />
            </td> 
            <td width="9%"> 
            </td> 
          </tr> 
          <tr> 
            <td style="width: 20%"> 
                Last name: 
            </td> 
            <td> 
                <input id="lname" size="30" name="lname" maxlength="30" /> 
            </td> 
        </tr> 
       <tr> 
            <td style="width: 20%"> 
                Address: 
            </td> 
            <td> 
                <input id="address" size="50" name="address" maxlength="50" /> 
            </td> 
        </tr> 
    </tbody> 
</table> 
</form>
<button onclick="IV()">IV</button> <br />
<textarea id="spanResult" rows="10" cols="200" style="font-family: monospace;"></textarea>    
</body>
</html>

参数调整说明 #

• 如果你需要调整地址字段的固定宽度，只需修改padString(address, 50)里的50为你需要的数值即可
• 已经给输入框加上了maxlength属性限制输入长度，避免超过你设定的上限
• textarea额外加了指定等宽字体的样式，避免部分浏览器默认字体不是等宽导致对齐失效

内容的提问来源于stack exchange，提问作者user7403515