如何用JavaScript+HTML实现文本框1前4字符与文本框2全内容拼接

嗨，这事儿不难，我帮你把代码调整一下就能实现你要的效果～核心就是用JavaScript的slice()方法提取第一个输入框的前4个字符，再和第二个输入框的内容拼接起来，替换掉原来的简单字符串相加逻辑。

修改后的完整代码 #

<form onsubmit="return false" oninput="txtCombined.value = txtBox1.value.slice(0,4) + txtBox2.value">
  文本框1（取前4字符）: <input type="text" name="txtBox1" /> <br><br>
  文本框2（全部内容）: <input type="text" name="txtBox2" /> <br><br>
  组合结果: <input type="text" name="txtCombined" > <br><br>
</form>

关键细节说明 #

• slice(0,4)的作用：这个方法会从字符串的起始位置（索引0）开始截取，到第4个字符的位置结束（不包含索引4对应的字符）。如果文本框1的内容不足4个字符，它会自动截取到字符串末尾，不会出现报错或异常。
• 我把原来的输入框命名改成了更贴合需求的txtBox1、txtBox2，结果框命名为txtCombined，这样代码的可读性更强，一看就知道每个元素的作用。
• 保留了原有的onsubmit="return false"来阻止表单的默认提交行为，同时用oninput事件实时触发结果更新，确保输入内容变化时，组合结果能立刻同步显示。

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