jQuery - Keyboard event

Bài viết này sẽ giới thiệu một số ví dụ đơn giản về các sự kiện phím(keyboard event) trong jQuery:

1. keypress
Tình huống:Nhập một kí tự bất kì vào ô textbox bên trái sẽ hiển thị mã kí tự tương ứng bên ô textbox bên phải

Code

<div>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#txt_left_ex1").keypress(function(e){
      $("#txt_keypress").val(e.keyCode);
    });
  });
  </script>
  <input type="text" id="txt_left_ex1"/>
<input type="text" id="txt_keypress" disabled/>
</div>





2. keydown và keyup
Tình huống:Nhập một kí tự bất kì vào ô textbox bên trái sự kiện keydown sẽ hiển thị mã kí tự tương ứng, sự kiện keyup sẽ hiển thị mã kí tự tiếp theo.

Code

<div>
  <style>
  #left{
    float:left;
  }
  #right{
    float:left;
    padding-left:50px;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#txt_left_ex2").keydown(function(e){
      $("#txt_keydown").val(e.keyCode);
    });
    $("#txt_left_ex2").keyup(function(e){
      $("#txt_keyup").val(e.keyCode+1);
    });
  });
  </script>
  <div>
    <div id="left"><input type="text" id="txt_left_ex2"/></div>
    <div id="right"><input type="text" id="txt_keydown" disabled/>
    <input type="text" id="txt_keyup" disabled/>
    <div style="clear:both;"></div>
  </div>
</div>







3. Một số thuộc tính của ObjectEventHandle trong keyboard event thường sử dụng
• ctrlKey: trả về true khi phím Ctrl được sử dụng.
• shiftKey: trả về true khi phím Shift được sử dụng.
• altKey: trả về true khi phím Alt được sử dụng.
• which và keyCode: trả về mã kí tự tương ứng trên bàn phím(không tính kí tự hoa a = A = 65).
• charCode: trả về mã kí tự tương ứng trong bảng mã mà bạn đang sử dụng(UTF-8, ASCII...).
• type: loại event đang sở hữu ObjectEventHandle(keydown, keyup...).


4. Bảng mã keyCode

Key name	Key code	Key name	Key code	Key name	Key code
backspace	8	tab	9	enter	13
shift	16	ctrl	17	alt	18
pause/break	19	capslock	20	escape	27
page up	33	page down	34	end	35
home	36	left arrow	37	up arrow	38
right arrow	39	down arrow	40	insert	45
delete	46	0	48	1	49
2	50	3	5	4	52
5	53	6	54	7	55
8	56	9	57	a	65
b	66	c	67	d	68
e	69	f	70	g	71
h	72	i	73	j	74
k	75	l	76	m	77
n	78	o	79	p	80
q	81	r	82	s	83
t	84	u	85	v	86
w	87	x	88	y	89
z	90	left window key	91	right window key	92
select	93	numpad 0	96	numpad 1	97
numpad 2	98	numpad 3	99	numpad 4	100
numpad 5	101	numpad 6	102	numpad 7	103
numpad 8	104	numpad 9	105	multiply(* numboard)	106
add	107	subtract	109	decimal point(. numboard)	110
divide(/ numboard)	111	f1	112	f2	113
f3	114	f4	115	f5	116
f6	117	f7	118	f8	119
f9	120	f10	121	f11	122
f12	123	num lock	144	scroll lock	145
semi-colon(;)	186	equal sign(=)	187	comma(,)	188
dash(-)	189	period(.)	190	forward slash(/)	191
grave accent(`)	192	open bracket([)	219	back slash(\)	220
close bracket(])	221	single quote(')	222