7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Tạo một bàn phím với CSS và jQuery

Read Time: 10 mins

Vietnamese (Tiếng Việt) translation by Thai An (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

Final ProductFinal ProductFinal Product

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.

Organization of the filesOrganization of the filesOrganization of the files

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.

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.

The HTML before CSS is applied.The HTML before CSS is applied.The HTML before CSS is applied.

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.

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.
Before and after the CSS is applied.Before and after the CSS is applied.Before and after the CSS is applied.

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.

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ề.

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ự.

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.

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ì.

The markup behind the delete key.The markup behind the delete key.The markup behind the delete key.

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.

The markup behind the symbol keys.The markup behind the symbol keys.The markup behind the symbol keys.

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.

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ữ).

Code JavaScript sau cùng

Final ProductFinal ProductFinal Product

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.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.