포커스를 주고, 자판을 눌렀다 떼어 보라

포커스를 주고 자판을 누른 상태 동안 KeyDown() 기능함수를 호출하고, 누른 것을 해제하면 KeyUp() 기능함수를 호출한다.

<SCRIPT>
function KeyDown(obj){
  obj.style.backgroundColor='#ffff00';
}
function KeyUp(obj){
  obj.style.backgroundColor='#00ffff';
}
</SCRIPT>

<DIV onKeyDown="KeyDown(this)" onKeyUp="KeyUp(this)"
  style="width:300;border:solid 1 blue;padding:4px">포커스를 주고, 자판을 눌렀다 떼어 보라</DIV>
포커스를 주고, 자판을 눌렀다 떼어 보라

onkeypress 이벤트의 경우 얼마나 오래동안 자판을 누르고 떼었는지는 관계없이 한번이라도 자판을 눌렀었는지를 검정하게 된다.
예제에서는 한번의 이벤트로 배경색 변경과 경고, 두가지 작용을 하게 Javascript에서 코딩하였다.

<DIV onKeyPress="this.style.backgroundColor='#ffff00';alert('키가 눌렸었습니다.')"
  style="width:300;border:solid 1 blue;padding:4px">포커스를 주고, 자판을 눌렀다 떼어 보라</DIV>
노란 박스에 초점을 주세요.

박스에 초점을 주고 키입력 해 보라
<SCRIPT>
var charCode;
function checkchar(charCode){  // 입력된 키 코드(10진수)로 기능함수를 수행한다
  if ((charCode>47) && (charCode<58)) alert('('+charCode+')=수치')  // 수치 범위(0~9) 점검
  else if ((charCode>64) && (charCode<91)) alert('('+charCode+')=대문자')  // 대문자 범위(A~Z) 점검
  else if ((charCode>96) && (charCode<123)) alert('('+charCode+')=소문자')  // 소문자 범위(a~z) 점검
  else alert('('+charCode+')=수치도 알파벳도 아님');
  // fname.iname.value=''; // 매번 전번 입력 문자를 지우려면 
  fname.iname.focus(); // 초점을 다시 준다
}
</SCRIPT>

<DIV id="showF" style="border:solid 1 blue;text-align:center;color:red">노란 박스에 초점을 주세요.</DIV>
<FORM name=fname>
<INPUT name=iname
  onkeypress="checkchar(event.keyCode)"
  onFocus="showF.innerHTML='<FONT color=blue>초점이 왔어요. 입력해 보라.</FONT>'"
  onBlur="showF.innerHTML='<FONT color=red>노란 박스에 초점을 주세요.</FONT>'"
  style="border:solid 1 red;text-align:center;padding:.5em;background:yellow">
<INPUT type=reset value='Reset'><BR>
박스에 초점을 주고 키입력 해 보라<BR>
</FORM>