javascript - 如何编码页面以在键盘事件的 div 中插入图像？

Question

我正在制作一组兼作字母表的动画 GIF 图像。它们仍在进行中，但出于显示目的，我想在我的网站上有一个页面，您可以在其中使用键盘使用字母书写文本。

简单来说，我希望键盘上的每个字母键都与一个图像相关联，这样当按下时，该图像就会出现在屏幕上（在一个 div 内，它将充当“文本框”），种类喜欢使用字体？

是否有一个库或插件可以让这变得非常容易？

如果没有，任何有关编码的建议将不胜感激。谢谢！

Answer 1

• 将您的图片转换为网络字体。https://www.google.com/?q=online+font+creator#q=online+font+creator
• 使用 @font-face CSS 来导入你的字体。http://css-tricks.com/snippets/css/using-font-face/
• 在 TEXTAREA 或 CONTENTEDITABLE DIV 上设置 font-family CSS

Answer 2

在我看来，这可以通过 jQuery 轻松实现。由于问题本身非常开放，我不会费心编写任何代码，但您的步骤可能如下所示：

1. 在文档中添加一个onkeydown/ onkeypresseventListener，它调用了一个函数keyPressed
2. 在keyPressed函数中，检查单击了哪个键。您可以在此处找到关键代码。
3. 我只会用您期望的关键代码调用图像。例如，带有字母“A”的图像将被称为 65.gif，等等。

Answer 3

HTML

<input id="textbox" type="text" />

jQuery

$('#textbox').keypress(function(event) {
    if ( event.which == 13 )
        event.preventDefault();

    $(document.body).append('<img src="' + String.fromCharCode(event.keyCode) + '.gif">');
});