Cào phím cùng ứng dụng Faking Textarea đơn giản

Cào phím cùng ứng dụng Faking Textarea đơn giản

Anh NguyễnBạn nghĩ gì về bài viết này?

Bạn đã hack NASA bao giờ chưa? Bạn đã từng đặt câu hỏi về những lập trình viên trong phim hành động của Mỹ họ chỉ cần gõ phím là một loạt các dòng code hiển thị trên màn hình không? Hay đơn giản là vào các trang web như Hacker Typer hay GeekPrank để khoe với bạn bè “Nhìn tao code có ngầu không?”. Trong bài viết này, mình sẽ hướng dẫn các bạn làm 1 ứng dụng đơn giản tương tự có tên là Faking Textarea on Typing bằng JavaScript để phần nào giúp các bạn hiểu rõ hơn về cách thức thực thi của ứng dụng trên.

Faking Textarea

Chọn Result rồi cào phím thôi =)))

Bước 1: Tạo file html có tên là fakingtextarea.html và đặt code trên phần body

  • Tạo 1 form cơ bản
  • Thêm thẻ label chứa thẻ textarea để có thể cào phím =))
<form>
    <label>
        <textarea cols="30" rows="5" id="txt"></textarea>
    </label>
</form>

Trong textarea, mình để độ rộng của cột (cols) và hàng (rows) là 30 và 5. Các bạn có thể tuỳ chỉnh theo ý thích của mình nhé.

Bước 2: Tạo 1 mảng lưu các chữ cái sẽ hiển thị ra màn hình và 1 biến để cộng chuỗi

let array = [];
let str = "";
array[1] ='T';
array[2] ='Ô';
array[3] ='I';
array[4] =' ';
array[5] ='L';
array[6] ='À';
array[7] =' ';
array[8] ='M';
array[9] ='Ộ';
array[10] ='T';
array[11] =' ';
array[12] ='T';
array[13] ='H';
array[14] ='Ằ';
array[15] ='N';
array[16] ='G';
array[17] =' ';
array[18] ='N';
array[19] ='G';
array[20] ='Ố';
array[21] ='C';
array[22] ='!';

Ở đây, mình chọn lưu chuỗi sẽ hiển thị ra màn hình là “TÔI LÀ MỘT THẰNG NGỐC”. Khi người dùng nhập vào form, từng chữ cái của chuỗi sẽ được hiển thị ra màn hình theo đúng chuỗi trên chứ không phải những ký tự mà người dùng nhập vào. Để làm được điều đó, ta cần một hàm để thực thi:

function fake()
    {
        let text = document.getElementById("txt").value;
        let j = text.length;
        if (j > 0)
        {
            for(let i = 1; i <= j; i++)
            {
                str = str + array[i];
                if (i === 22)
                {
                    document.getElementById("txt").value= "";
                    str = "";
                }
            }
        }
        document.getElementById("txt").value = str;
        str = "";
        setTimeout("fake()", 1);
    }
  • Đầu tiên, ta sử dụng document.getElementById("txt").value để lấy giá trị của textarea
  • Sử dụng vòng lặp để cộng chuỗi
  • Nếu i chạy đến phần tử cuối cùng của mảng thì đặt lại chuỗi về rỗng
  • Hàm setTimeout(function, milisecond) để gọi lại hàm sau từng mili giây. Để có thể hiểu được chương trình này hoạt động như thế nào thì bạn phải hiểu và nắm rõ bất đồng bộ là gì? Xem thêm bài viết về bất đồng bộ tại đây

Bước 3: Thêm sự kiện onload vào thẻ body và thẻ style để căn nội dung ra giữa màn hình

<body onload="fake()" style="text-align: center;">

Tới đây, chúng ta đã hoàn thành xong ứng dụng Faking Textarea đơn giản bằng JavaScript và bắt đầu cào phím thôi!!!

Chúc các bạn thành công!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận