如何实现复制输入框按空格后始终仅显示单个单词？

你的核心需求是让第二个输入框始终只显示第一个输入框中的最后一个单词（按下空格后清空，随后输入的新单词单独显示）。原代码的问题在于每次input事件触发时直接把第一个输入框的全部内容同步给第二个，导致之前的单词会被带回来。

下面是两种可行的实现方式：

方式一：基于输入内容拆分取最后一个单词 #

这种方式不需要监听键盘事件，直接在input事件中处理内容，简洁且适配所有输入场景（键盘输入、粘贴等）：

window.onload = function() {
    const src = document.getElementById("paragraph-text");
    const dst = document.getElementById("copy");
    
    src.addEventListener('input', function() {
        // 按空格分割内容，取最后一项（为空时显示空字符串）
        const words = src.value.split(' ');
        dst.value = words[words.length - 1] || '';
    });
};

方式二：监听空格按键+实时同步最后单词 #

如果需要按下空格时立即清空第二个输入框的视觉反馈，可以配合键盘事件实现：

window.onload = function() {
    const src = document.getElementById("paragraph-text");
    const dst = document.getElementById("copy");
    
    // 实时同步最后一个单词
    src.addEventListener('input', function() {
        const lastWord = src.value.split(' ').pop() || '';
        dst.value = lastWord;
    });
    
    // 按下空格时立即清空第二个输入框
    src.addEventListener('keydown', function(event) {
        if (event.key === ' ') { // 用event.key替代已废弃的keyCode，兼容性更好
            dst.value = '';
        }
    });
};

说明 #

• 方式一适配所有输入场景，不管用户是手动输入、粘贴文本还是通过其他方式修改内容，都能保证第二个输入框只显示最后一个单词。
• 方式二在按下空格时会立即清空第二个输入框，视觉反馈更及时，后续输入新单词时自动同步当前内容。

对应的HTML保持不变：

<input type="text" id="paragraph-text" name="paragraph-text" placeholder="type here to begin...">
<input type="text" id="copy" name="copy">

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