키보드 이벤트에서 div에 이미지를 삽입 할 페이지를 어떻게 코딩합니까?

Question

나는 일종의 알파벳으로 두 번 움직이는 애니메이션 GIF 이미지 세트를 만들고 있습니다. 그들은 아직 진행 중이지만 표시 목적으로 키보드를 사용하여 알파벳을 사용하여 텍스트를 쓸 수있는 웹 사이트 페이지를 만들고 싶습니다.

간단히 말해서 키보드의 각 문자 키를 이미지와 연관 시켜서 이미지를 화면에 표시 할 수 있습니다 (div 안에있는 "텍스트 상자" "), 글꼴을 사용하는 것과 같은 종류입니까?

정말 쉽게 만들 수있는 라이브러리 또는 애드온이 있습니까?

그렇지 않은 경우 코딩에 대한 제안 사항에 많은 도움이됩니다. 감사합니다.

Answer 1

jQuery로 쉽게 얻을 수있는 것처럼 보입니다. 질문 자체가 매우 열려, 나는 코드를 작성 귀찮게 아니지만, 당신의 단계는 다음과 같이 수 :

1. 함수를 호출하는 문서에 onkeydown/onkeypress의 EventListener를 추가 keyPressed
2. 에서 keyPressed 기능, 어떤 키를 클릭했는지 확인하십시오. 키 코드 here을 찾을 수 있습니다.
3. 나는 단지 당신이 기대하는 키 코드로 이미지를 호출 할 것이다. 예를 들어 문자 'A'가있는 이미지는 65.gif라고 불리우며 아들은 켜져 있습니다.

Answer 2

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

Answer 3

• 하는 웹 폰트에 사진을 켭니다. 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