如何使用 jQuery 模拟打字？

Posted 2023-04-14

【中文标题】如何使用 jQuery 模拟打字？

【英文标题】：How do you simulate typing using jQuery?

【发布时间】：2011-02-04 09:54:44

【问题描述】：

就像click() 可以用来触发元素上的点击事件一样，有没有办法模拟字符串的输入？

【参考方案1】：

您可以根据需要使用这些事件：

.keydown() .keypress() .keyup()

【参考方案2】：

如果您真的想模拟输入（即包括触发事件并将文本附加到输入或文本区域元素），您可以使用 jQuery 模拟扩展插件：http://j-ulrich.github.com/jquery-simulate-ext

然后你可以使用

$('input').simulate("key-sequence", sequence: "This is a test", delay: 10);

模拟输入文本"This is a test"，每次按键之间有10毫秒的延迟。

免责声明：我是插件的作者。

【讨论】：

该库根据其 github 页面已被废弃 :(。有人知道替代品吗？

【参考方案3】：

您是否正在寻找一种方法来触发与键入相关的事件，或者您是否想将文本附加到容器中以使其看起来像是有人在键入？如果您正在寻找事件，那么@Nick 在建议触发事件的方法方面是绝对正确的。如果是后者，您将需要使用计时器将容器的 text/html 替换为文本的连续子字符串。如果文本很长，您可以通过附加包含每个字母的连续 span 元素来获得更好的效果 - 这将减少文本被替换和布局瞬间更改时的闪烁。

编辑：我打算添加一个示例，但事实证明已经有一个插件：jTypeWriter。

【讨论】：

感谢您的推荐，尽管我只需要填充文本区域（不需要任何动画）。我意识到我可以使用 innerHTML 或什么，我很傻 :)

看起来 jTypeWriter 可能已经死了。至少，我在任何地方都找不到。但我遇到了一个看起来不错的替代 jQuery 插件：TypeType.