Placeholder textbox kiểu đánh máy – jQuery placeholderTypewriter

Hôm nay mình sẽ giới thiệu tới các bạn 1 jQuery plugin – jQuery placeholderTypewriter –  Giúp chúng ta làm hiệu ứng chữ đánh máy cho placeholder của 1 textbox. Bạn có thể nhìn bên dưới để hình dung về chức năng của jQuery plugin này nhé.

Demo on Github Download

Cách sử dụng

1. Chèn thư viện placeholderTypewriter vào web. Trong file download về bạn sẽ thấy file placeholderTypewriter.js – file này chính là thư viện chính để tạo hiệu ứng đánh máy cho placehover của textbox. Để file đó chạy được thì chắc chắn web của bạn cần load thư viện jQuery (bản mới nhất càng tốt).

Chèn jquery vào web bằng code sau:

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="placeholderTypewriter.js"></script>

2. Ví dụ có thẻ textbox html như sau

<input class="search-box" type="text" name="search" id="search">

3. jQuery code như sau

/* Placeholder Typewriter */
var placeholderText = [
  "Where would you like to go?",
  "Amsterdam?",
  "Paris?",
  "Berlin?",
  "London?",
  "New York?",
  "San Francisco?"
];
$('#search').placeholderTypewriter({text: placeholderText});

Trong đó placeholderText là 1 array chứa các chữ mà bạn muốn chạy kiểu đánh máy.

Mẫu website nổi bật của tôi

Dự án website bán laptop surface

Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp

Mẫu website bán hàng giống shopee

Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy

Các thông số

Ví dụ:

$('#search').placeholderTypewriter({
  text: placeholderText,
  delay: 200,
  pause: 3000
});

Demo on Github Download