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

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress

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

Các thông số

Ví dụ:

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

Demo on Github Download