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

Cập nhật lần cuối 05/01/2022 by trong HTML&CSS vào 21/01/2017 có 2427 Views

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.

Các thông số

OptionValuesDefault
delayKhoảng thời gian hiển thị giữa các ký tự (ms)50ms
pauseKhoảng thời gian giữa các chữ1000ms
textMảng giá trị chứa các chữ cần hiển thịno default

Ví dụ:

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

Demo on Github Download

5/5 - (3 votes)
Từ khóa: ,
  • Bình luận
Sản phẩm nổi bật của Toản
x