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

Cập nhật lần cuối 21/01/2017 by trong HTML&CSS vào 21/01/2017 có 167 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ố

Option Values Default
delay Khoảng thời gian hiển thị giữa các ký tự (ms) 50ms
pause Khoảng thời gian giữa các chữ 1000ms
text Mả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

Placeholder textbox kiểu đánh máy – jQuery placeholderTypewriter
5 (100%) 1 vote
Từ khóa: ,
  • Bình luận
Có thể bạn quan tâm
x