如何编写页面以在键盘事件中的div中插入图像?

时间:2013-08-05 18:05:44

标签: javascript jquery keyboard-events

我正在研究一组动画GIF图像,它们是一种字母表。 它们仍然在进行中,但出于显示目的,我希望在我的网站上有一个页面,您可以使用键盘使用字母表来编写文本。

简单来说,我希望键盘上的每个字母键都与图像相关联,这样当按下时,该图像就会出现在屏幕上(在div中,它将充当“文本框”) ),有点像使用字体?

是否有一个库或插件可以让它变得非常简单?

如果没有,我们非常感谢任何编码建议。 谢谢!

3 个答案:

答案 0 :(得分:0)

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

  1. 向文档中添加onkeydown / onkeypress eventListener,该文档调用函数keyPressed
  2. keyPressed功能中,检查点击了哪个键。您可以找到关键代码here
  3. 我只会使用您期望的密钥代码调用图像。例如,带有字母'A'的图像将被称为65.gif,而儿子则被称为。

答案 1 :(得分:0)

<强> 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">');
});

答案 2 :(得分:0)