Cách Tạo Textarea Character Count Bằng Javascript

Cách Tạo Textarea Character Count Bằng Javascript


Ngày 2 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo chức năng đếm số ký tự bằng javascript cho thiết kế và phát triển website nha.

JavaScript Character Count Textarea

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc cho chức năng text character count thông qua các thẻ HTML ở đoạn code dưới đây nha:

<!--www.niemvuilaptrinh.com-->
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript character count textarea</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <textarea id="content" rows="10" placeholder="Bạn Hãy Nhập Chữ Vào Ô Này..."></textarea>
        <p id="count-result">Tổng Số Chữ: 0</p>
    </div>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ dùng các thuộc tính CSS cơ bản để giúp chức năng này trông bắt mắt hơn thông qua đoạn code sau đây nha:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
body{
    background-color: #161E54;
}
.container{
    width: 400px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
textarea{
    width: 100%;
    resize: none;
    background-color: #fff;
    border: none;
    font-size: 16px;
    line-height: 30px;
    padding: 15px;
    border-radius: 3px;
    color: #FF9B6A;
    outline: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
p{
    color: #e5e5e5;
    text-align: right;
    margin-top: 20px;
}

Javascript

Phần cuối cùng mình sẽ sử dụng lệnh addEventListener trong Js để lắng nghe sự kiện khi người dùng nhập vào ô input. Và sau đó chúng ta sẽ dùng chức năng length để xuất số ký tự của người dùng nhập vào ô input. Để hiểu rõ hơn bạn xem đoạn code dưới đây nha:

let myContent = document.getElementById("content");
myContent.addEventListener("input", () => {
    let count = (myContent.value).length;
    document.getElementById("count-result").textContent = `Tổng Số Chữ: ${count}`;
});

Và kết quả bạn xem video bên dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen đếm số ký tự by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo chức năng textarea character count javascript cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!