基于jQuery keyup与trigger实现点击按钮后逐字符输入功能求助

我来帮你搞定这个需求——点击按钮后先输出首字符'H'，之后每隔1秒依次输出后续字符到输入框，同时严格用上jQuery的keyup事件和trigger方法。

核心思路 #

1. 绑定keyup事件：给输入框绑定keyup事件，让它能接收我们传递的字符并追加到输入框里。
2. 按钮触发流程：点击按钮后，先拿到目标文本、清空输入框，先输出第一个字符，之后靠定时器每隔1秒通过trigger('keyup')触发事件传递下一个字符，直到所有字符都输出完。

完整代码示例 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Trigger Keyup Typing Effect</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 存储待输出文本的span -->
    <span id="sourceText">Hello World!</span>
    <!-- 触发输入的按钮 -->
    <button id="typeBtn">Start Typing</button>
    <!-- 目标输入框 -->
    <input type="text" id="targetInput" />

    <script>
        // 给输入框绑定keyup事件，接收传递的字符并追加到输入框
        $('#targetInput').on('keyup', function(e, char) {
            if (char) {
                $(this).val($(this).val() + char);
            }
        });

        // 按钮点击事件处理逻辑
        $('#typeBtn').click(function() {
            const sourceText = $('#sourceText').text();
            const targetInput = $('#targetInput');
            
            // 清空输入框，重置索引
            targetInput.val('');
            let currentIndex = 0;

            // 先输出第一个字符（对应需求里的首字符'H'）
            if (sourceText.length > 0) {
                targetInput.trigger('keyup', [sourceText[currentIndex]]);
                currentIndex++;
            }

            // 设置定时器，每隔1秒输出下一个字符
            const typingTimer = setInterval(() => {
                if (currentIndex >= sourceText.length) {
                    // 所有字符输出完成，清除定时器
                    clearInterval(typingTimer);
                    return;
                }
                // 触发keyup事件，传递当前要输出的字符
                targetInput.trigger('keyup', [sourceText[currentIndex]]);
                currentIndex++;
            }, 1000);
        });
    </script>
</body>
</html>

关键代码说明 #

• keyup事件绑定：$('#targetInput').on('keyup', function(e, char) 里的char是我们通过trigger传递的额外参数，用来接收要追加的字符。
• trigger触发事件：targetInput.trigger('keyup', [sourceText[currentIndex]]) 调用trigger触发keyup事件，同时把当前要输出的字符作为参数传给事件处理函数。
• 定时器控制节奏：用setInterval实现1秒间隔的逐字符输出，当所有字符输出完毕后，用clearInterval清除定时器，避免无效执行。

这样既满足了逐字符延迟输出的需求，又严格使用了jQuery的keyup和trigger功能，完全符合你的要求。

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