() translation by (you can also view the original English article)
Thỉnh thoảng chỉ cần vui để chơi đùa cùng các ngôn ngữ lập trình chúng ta biết và thấy cái chúng ta có thể tạo ra. Tôi nghĩ sẽ rất vui khi tạo ra một bàn phím trực tuyến nhỏ với CSS và sau đó làm cho nó hoạt động với jQuery. Bàn phím gồm phím "hành động" (caps lock, shift, và delete) chúng sẽ thay đổi bàn phím khi được nhấn vào. Tôi sẽ chỉ bạn làm sao để xây dựng nó ngay hôm nay.
Bước 1: File và Cơ bản HTML
Bàn phím này yêu cầu rất nhiều thiết lập HTML và chỉnh sửa CSS. Mỗi phím sẽ được đại diện bởi một item trong một danh sách không xếp thứ tự. Mỗi item trong danh sách sẽ có một class kèm theo nó, được sử dụng trong cả CSS và jQuery. Đa số các class chỉ là "letter", "lastitem" hoặc một vài thứ tương tự.
Bảo đảm rằng bạn đã thiết lập một thư mục, nơi bạn sẽ dùng bàn phím này. Bên trong thư mục, tạo một file index.html cùng một thư mục css và một thư mục js. Sau cùng, tạo file keyboard.js trong thư mục js và một file style.css trong thư mục.
Bên trong file HTML chúng ta sẽ kèm 2 file JavaScript và 1 file css. Trong thẻ body sẽ có một danh sách Khổng Lồ chưa được sắp xếp gồm những letter (ký tự), number (con số) và vài phím "action" hành động. HTML cũng sẽ có một textarea với id là "keyboard". Nó sẽ nơi để tất cả những ký tự được bổ sung vào. Code bên dưới sẽ được đặt bên trong file index.html.
1 |
|
2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
3 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
4 |
<head>
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
6 |
|
7 |
<title>Online Keyboard</title> |
8 |
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
9 |
</head>
|
10 |
<body>
|
11 |
|
12 |
<div id="container"> |
13 |
<textarea id="write" rows="6" cols="60"></textarea> |
14 |
<ul id="keyboard"> |
15 |
<li class="symbol"><span class="off">`</span><span class="on">~</span></li> |
16 |
<li class="symbol"><span class="off">1</span><span class="on">!</span></li> |
17 |
<li class="symbol"><span class="off">2</span><span class="on">@</span></li> |
18 |
<li class="symbol"><span class="off">3</span><span class="on">#</span></li> |
19 |
<li class="symbol"><span class="off">4</span><span class="on">$</span></li> |
20 |
<li class="symbol"><span class="off">5</span><span class="on">%</span></li> |
21 |
<li class="symbol"><span class="off">6</span><span class="on">^</span></li> |
22 |
<li class="symbol"><span class="off">7</span><span class="on">&</span></li> |
23 |
<li class="symbol"><span class="off">8</span><span class="on">*</span></li> |
24 |
<li class="symbol"><span class="off">9</span><span class="on">(</span></li> |
25 |
<li class="symbol"><span class="off">0</span><span class="on">)</span></li> |
26 |
<li class="symbol"><span class="off">-</span><span class="on">_</span></li> |
27 |
<li class="symbol"><span class="off">=</span><span class="on">+</span></li> |
28 |
<li class="delete lastitem">delete</li> |
29 |
<li class="tab">tab</li> |
30 |
<li class="letter">q</li> |
31 |
<li class="letter">w</li> |
32 |
<li class="letter">e</li> |
33 |
<li class="letter">r</li> |
34 |
<li class="letter">t</li> |
35 |
<li class="letter">y</li> |
36 |
<li class="letter">u</li> |
37 |
<li class="letter">i</li> |
38 |
<li class="letter">o</li> |
39 |
<li class="letter">p</li> |
40 |
<li class="symbol"><span class="off">[</span><span class="on">{</span></li> |
41 |
<li class="symbol"><span class="off">]</span><span class="on">}</span></li> |
42 |
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> |
43 |
<li class="capslock">caps lock</li> |
44 |
<li class="letter">a</li> |
45 |
<li class="letter">s</li> |
46 |
<li class="letter">d</li> |
47 |
<li class="letter">f</li> |
48 |
<li class="letter">g</li> |
49 |
<li class="letter">h</li> |
50 |
<li class="letter">j</li> |
51 |
<li class="letter">k</li> |
52 |
<li class="letter">l</li> |
53 |
<li class="symbol"><span class="off">;</span><span class="on">:</span></li> |
54 |
<li class="symbol"><span class="off">'</span><span class="on">"</span></li> |
55 |
<li class="return lastitem">return</li> |
56 |
<li class="left-shift">shift</li> |
57 |
<li class="letter">z</li> |
58 |
<li class="letter">x</li> |
59 |
<li class="letter">c</li> |
60 |
<li class="letter">v</li> |
61 |
<li class="letter">b</li> |
62 |
<li class="letter">n</li> |
63 |
<li class="letter">m</li> |
64 |
<li class="symbol"><span class="off">,</span><span class="on"><</span></li> |
65 |
<li class="symbol"><span class="off">.</span><span class="on">></span></li> |
66 |
<li class="symbol"><span class="off">/</span><span class="on">?</span></li> |
67 |
<li class="right-shift lastitem">shift</li> |
68 |
<li class="space lastitem"> </li> |
69 |
</ul>
|
70 |
</div>
|
71 |
|
72 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
73 |
<script type="text/javascript" src="js/keyboard.js"></script> |
74 |
</body>
|
75 |
</html>
|
Bạn sẽ không phải quá lo lắng về các class trong những item của danh sách vào lúc này. Tôi sẽ giải thích chúng nhiều hơn khi chúng ta dùng jQuery. Tuy nhiên, một số class (như right-shift và lastitem) chỉ ở đó bởi vì file CSS mà chúng ta sẽ sử dụng.
Bước 2: Làm cho danh sách đẹp hơn
JavaScript cho bàn phím sẽ làm việc hoàn hảo mà không cần CSS, nhưng nó chả trông giống một bàn phím. Tôi sẽ không tính giải thích từng style bởi vì phần nhiều chúng ta tự giải thích được, nhưng có một số tôi sẽ nhắc qua. Lưu các CSS sau vào style.css ở trong thư mục css.
1 |
|
2 |
* { |
3 |
margin: 0; |
4 |
padding: 0; |
5 |
}
|
6 |
body { |
7 |
font: 71%/1.5 Verdana, Sans-Serif; |
8 |
background: #eee; |
9 |
}
|
10 |
#container { |
11 |
margin: 100px auto; |
12 |
width: 688px; |
13 |
}
|
14 |
#write { |
15 |
margin: 0 0 5px; |
16 |
padding: 5px; |
17 |
width: 671px; |
18 |
height: 200px; |
19 |
font: 1em/1.5 Verdana, Sans-Serif; |
20 |
background: #fff; |
21 |
border: 1px solid #f9f9f9; |
22 |
-moz-border-radius: 5px; |
23 |
-webkit-border-radius: 5px; |
24 |
}
|
25 |
#keyboard { |
26 |
margin: 0; |
27 |
padding: 0; |
28 |
list-style: none; |
29 |
}
|
30 |
#keyboard li { |
31 |
float: left; |
32 |
margin: 0 5px 5px 0; |
33 |
width: 40px; |
34 |
height: 40px; |
35 |
line-height: 40px; |
36 |
text-align: center; |
37 |
background: #fff; |
38 |
border: 1px solid #f9f9f9; |
39 |
-moz-border-radius: 5px; |
40 |
-webkit-border-radius: 5px; |
41 |
}
|
42 |
.capslock, .tab, .left-shift { |
43 |
clear: left; |
44 |
}
|
45 |
#keyboard .tab, #keyboard .delete { |
46 |
width: 70px; |
47 |
}
|
48 |
#keyboard .capslock { |
49 |
width: 80px; |
50 |
}
|
51 |
#keyboard .return { |
52 |
width: 77px; |
53 |
}
|
54 |
#keyboard .left-shift { |
55 |
width: 95px; |
56 |
}
|
57 |
#keyboard .right-shift { |
58 |
width: 109px; |
59 |
}
|
60 |
.lastitem { |
61 |
margin-right: 0; |
62 |
}
|
63 |
.uppercase { |
64 |
text-transform: uppercase; |
65 |
}
|
66 |
#keyboard .space { |
67 |
clear: left; |
68 |
width: 681px; |
69 |
}
|
70 |
.on { |
71 |
display: none; |
72 |
}
|
73 |
#keyboard li:hover { |
74 |
position: relative; |
75 |
top: 1px; |
76 |
left: 1px; |
77 |
border-color: #e5e5e5; |
78 |
cursor: pointer; |
79 |
}
|
Chú ý các style sau đây bởi vì chúng rất quan trọng.
- .on - Trong một số item của danh sách, có hai spans. Đó là những phím có nhiều hơn 2 ký tự cho mỗi phím; giống như những con số. Span có class là on sẽ bị ẩn đi. Điều này thay đổi khi nào user click vào phím shift, nhưng chi tiết hơn sẽ dành cho JavaScript.
- .lastitem - Phím cuối cùng của bất kỳ hàng phím nào sẽ có lề phải (right margin) là zero để không phá hỏng bố cục.
Bước 3: Hoạt động của các phím
Nếu bạn click vào một item và không có gì xảy ra. Chúng ta sẽ áp dụng một chút jQuery để sửa nó. Ý tưởng chính chúng ta sẽ dùng là gán một click handler (xử lý khi nhấn) vào mỗi phím trong danh sách, lấy text khi được click, và thực hiện việc xử lý tuỳ vào class của item trong danh sách. Từ đây, tất cả JavaScript code sẽ đi vào file keyboard.js.
Phần thiết lập
Chúng ta cần jQuery và định nghĩa 3 biến số sẽ được dùng xuyên suốt đoạn code. Những biến số là textarea, một shift status, và một caps lock status.
1 |
|
2 |
$(function(){ |
3 |
var $write = $('#write'), |
4 |
shift = false, |
5 |
capslock = false; |
6 |
|
7 |
// The rest of the code goes here.
|
8 |
});
|
TIếp theo là gán click handler vào tất cả phím. Hai biến số được thiết lập khi phím được click. $this được định nghĩa chỉ để chúng giảm bớt phần gõ chữ, và ký tự được định nghĩa là HTML của item trong danh sách. Nếu item trong list là một ký tự, không có gì xảy ra với biến này và nó sẽ được trả về.
1 |
|
2 |
$('#keyboard li').click(function(){ |
3 |
var $this = $(this), |
4 |
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable |
5 |
|
6 |
// Code for processing the key.
|
7 |
});
|
Phím Shift và Caps Lock
If phím Shift (những item với class "left-shift" hoặc "right-shift") được click, chúng ta muốn bật tắt class "uppercase" của mỗi ký tự. Sau đó cho các item trong danh sách với một class "symbol" chúng ta muốn bật tắt hiển thị giữa những thẻ span lồng vào nhau. Điều ta muốn làm tiếp theo là thiết lập shift cho các giá trị boolean đối lập (nếu true thì xét thành false và ngược lai), và biến số caps lock thành false, và cuối cùng là trả về false để không làm gì khác với các biến ký tự.
1 |
|
2 |
// Shift keys
|
3 |
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { |
4 |
$('.letter').toggleClass('uppercase'); |
5 |
$('.symbol span').toggle(); |
6 |
|
7 |
shift = (shift === true) ? false : true; |
8 |
capslock = false; |
9 |
return false; |
10 |
}
|
Bây giờ nếu phím caps lock được click, chúng ta sẽ bật tắt class "uppercase" của những item trong danh sách; xét biến caps lock thành true, và trả về giá trị false.
1 |
|
2 |
// Caps lock
|
3 |
if ($this.hasClass('capslock')) { |
4 |
$('.letter').toggleClass('uppercase'); |
5 |
capslock = true; |
6 |
return false; |
7 |
}
|
Phím Delete
Với phím Delete, chúng ta cần gán một biến khác: html - những nội dung của textarea hiện thời đang có. Một khi đã có biến này, chúng ta thiết lập HTML mới cho textarea thành tất cả mọi ngoại thứ trừ ký tự cuối cùng. Phương thức substr của JavaScript giúp ta thực hiện điều này. Khi chúng ta trả về false một lần nữa để không xử lý thêm bất cứ gì.
1 |
|
2 |
// Delete
|
3 |
if ($this.hasClass('delete')) { |
4 |
var html = $write.html(); |
5 |
|
6 |
$write.html(html.substr(0, html.length - 1)); |
7 |
return false; |
8 |
}
|
Các ký tự đặc biệt
Với tất cả item trong danh sách không phải là chữ và không phải là những phím "action", chúng ta thay đổi biến ký tự sang một thứ đặc biệt. Cho một item trong danh sách với class "symbol", ký tự được xét thành nội dung của bất cứ thứ gì đang được nhìn thấy. Một space - khoảng trắng - (dĩ nhiên) được dùng cho space bar. Ký tự tab được đại diện bởi \t, và sau cùng là \t, và sau cùng một hàng mới (phím return) là \n.
1 |
|
2 |
// Special characters
|
3 |
if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); |
4 |
if ($this.hasClass('space')) character = ' '; |
5 |
if ($this.hasClass('tab')) character = "\t"; |
6 |
if ($this.hasClass('return')) character = "\n"; |
Các ký tự viết hoa
Nếu bạn có thể nhớ đến khi chúng ta xử lý phím shift và caps lock, thì class "uppercase" đã được bổ sung hoặc xoá đi qua hàm toggleClass. Nếu class uppercase được tìm thấy, ký tự được chuyển sang dạng viết hoa của nó với sự hỗ trợ của phương thức toUpperCase.
1 |
|
2 |
// Uppercase letter
|
3 |
if ($this.hasClass('uppercase')) character = character.toUpperCase(); |
Kết quả
Trên một bàn phím thông thường, bạn thường chỉ cần phím shift cho một letter. Nếu biến shift tìm ra đước xẹ thành true thì chúng ta muốn bật tắt hiển thị cho span của ký hiệu. Điều nàY cũng xảy ra khi phím caps lock là "on", các ký tự lần nữa được bật giữa uppercase và lowercase (viết hoa và viết thường).
Để hoàn tất nốt, ký tự được bổ sung vào textarea và người dùng có thể bắt đầu "typing" (đánh chữ).
1 |
|
2 |
// Remove shift once a key is clicked.
|
3 |
if (shift === true) { |
4 |
$('.symbol span').toggle(); |
5 |
if (capslock === false) $('.letter').toggleClass('uppercase'); |
6 |
|
7 |
shift = false; |
8 |
}
|
9 |
|
10 |
// Add the character
|
11 |
$write.html($write.html() + character); |
Code JavaScript sau cùng
1 |
|
2 |
$(function(){ |
3 |
var $write = $('#write'), |
4 |
shift = false, |
5 |
capslock = false; |
6 |
|
7 |
$('#keyboard li').click(function(){ |
8 |
var $this = $(this), |
9 |
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable |
10 |
|
11 |
// Shift keys
|
12 |
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { |
13 |
$('.letter').toggleClass('uppercase'); |
14 |
$('.symbol span').toggle(); |
15 |
|
16 |
shift = (shift === true) ? false : true; |
17 |
capslock = false; |
18 |
return false; |
19 |
}
|
20 |
|
21 |
// Caps lock
|
22 |
if ($this.hasClass('capslock')) { |
23 |
$('.letter').toggleClass('uppercase'); |
24 |
capslock = true; |
25 |
return false; |
26 |
}
|
27 |
|
28 |
// Delete
|
29 |
if ($this.hasClass('delete')) { |
30 |
var html = $write.html(); |
31 |
|
32 |
$write.html(html.substr(0, html.length - 1)); |
33 |
return false; |
34 |
}
|
35 |
|
36 |
// Special characters
|
37 |
if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); |
38 |
if ($this.hasClass('space')) character = ' '; |
39 |
if ($this.hasClass('tab')) character = "\t"; |
40 |
if ($this.hasClass('return')) character = "\n"; |
41 |
|
42 |
// Uppercase letter
|
43 |
if ($this.hasClass('uppercase')) character = character.toUpperCase(); |
44 |
|
45 |
// Remove shift once a key is clicked.
|
46 |
if (shift === true) { |
47 |
$('.symbol span').toggle(); |
48 |
if (capslock === false) $('.letter').toggleClass('uppercase'); |
49 |
|
50 |
shift = false; |
51 |
}
|
52 |
|
53 |
// Add the character
|
54 |
$write.html($write.html() + character); |
55 |
});
|
56 |
});
|
Tổng kết
Thỉnh thoảng thật vui khi khám phá, thậm chí nếu kết quả sau cùng không thực sự thuộc về "thế giới thực tế". Bằng việc ứng dụng một vài class vào item của danh sách, chúng ta đã có thể tạo một bàn phím bằng CSS và jQuery. Bàn phím không hoàn toàn vô ích. Tôi từng thấy nhiều website có tuỳ chọn cho sử dụng một bàn phím trên màn hình. Nhưng chủ yếu, bài này cho chúng ta hiểu nhiều hơn về khả năng của CSS và jQuery.
- Hãy theo dõi chúng tôi trên Twitter, hoặc subscribe trên NETTUTS RSS Feed cho nhiều bài viết và hưỡng dẫn về phát triển web mỗi ngày.
