如何让输入框内容实时同步到p标签，首字符即可显示？

问题根源 #

你当前代码里用的keypress事件存在触发时机的问题：这个事件在字符被插入输入框之前就会触发。所以输入第一个字符时，$(this).val()还没包含刚输入的内容，导致p标签无法同步显示；直到输入第二个字符时，才会带上第一个字符的值，这就是为什么第二个字符输入后才开始显示内容。

最简解决方案 #

直接使用input事件，它是专门监听输入框内容变化的事件，能覆盖键盘输入、粘贴、删除、输入法输入等所有场景，代码简洁且完全满足需求：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input />
<p></p>

$('input').on('input', function() {
  // 用text()替代html()更安全，避免潜在的XSS风险
  $('p').text($(this).val());
});

为什么弃用原有的keypress/keyup逻辑？ #

• keypress：仅在按下可打印字符时触发，且触发时机早于字符插入输入框，无法实时获取最新输入值
• keyup：虽然能获取到最新值，但需要单独处理删除键等特殊场景，代码冗余，还无法监听非键盘类的输入操作（比如右键粘贴内容）

而input事件一步到位解决所有同步需求，无需额外判断。

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