移动端input复制粘贴无法触发键盘事件同步显示文本问题

开发输入文本实时同步展示功能时出现兼容性问题：

• 桌面端浏览器向input输入框复制粘贴文本，内容可正常同步到展示元素
• 移动端设备打开页面执行复制粘贴操作后，<span id="addy"></span>元素无法显示粘贴的文本，必须手动点击输入框或重新键入字符才能触发内容同步

原实现代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <title>Skyverse | Mint</title>
  </head>
  <body>
    <input id="check" type="text">
    <span id="addy"></span>
    <script id="rendered-js" >
      $('input[type="text"]').on('keydown, keyup', function () {
        //获取输入框值
        var texInputValue = $('#check').val();
      
        //将值同步到页面展示
        $('#addy').html(texInputValue);
      });
      //# sourceURL=pen.js
          </script>
  </body>
</html>

代码存在两个核心问题：

1. jQuery多事件绑定语法错误：on()方法绑定多个事件时，事件名之间需要用空格分隔，原代码写的'keydown, keyup'带了逗号，实际无法正确绑定两个事件
2. 监听事件覆盖场景不全：仅监听keydown/keyup这类键盘事件，无法覆盖移动端系统级粘贴、输入法联想填充、语音转文字输入、快捷选择填充等非键盘触发的输入场景，移动端的粘贴操作大多不会触发键盘事件，自然不会执行同步逻辑

替换监听事件为input事件即可，该事件会在输入框值发生任意变更时触发，全场景覆盖键盘输入、粘贴、拖拽填充、输入法输入、语音输入等操作，桌面端和移动端全兼容。
修复后的核心JS代码：

// 绑定input事件，覆盖所有值变更场景
$('input[type="text"]').on('input', function () {
  const inputValue = $(this).val(); // 直接用this获取当前输入框对象，性能更好
  $('#addy').text(inputValue); // 纯文本同步用text()比html()更安全，避免XSS风险
});

额外提示：如果需要兼容极老旧的浏览器，可以额外补一个change事件做兜底，目前主流移动端浏览器都完美支持input事件。

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