Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Super Place Holder trong thẻ Input

Super Place Holder trong thẻ Input


Ngày 1 Tháng 2 Năm 2020

Super Place Holder trong thẻ Input

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn đến một ứng dụng Javascript có tên là superplaceholder.js để làm phong phú thêm cho thẻ input. Bây giờ hãy cùng nhau tìm hiểu nhé!

Chúng ta sẽ sử dụng plugin superplaceholder.js để tạo ra hiệu ứng cho thẻ input. Các bạn nhấp vào đường dẫn bên dưới để tải file Javascript về nhé!
Tải File Super Place Holder JS

Sau đó các bạn sẽ giải nén file và tạo ra cấu trúc thư mục cây như sau:

Table2Excel

Các bạn nhập đoạn code này vào trangchinh.html:

<!doctype html> 
<html lang="en">
<head>
<title>Trang Chính</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./superplaceholder.min.js"></script>
</body>
</html>

Sau khi đã thêm được file superplaceholder.min.js vào trang HTML thì bạn nhập ba thẻ input như ví dụ sau đây:










Với đoạn code như hình dưới đây và các bạn cần lưu ý là đặt id cho từng thẻ input nhé :

<label>Tên</label><br />
<input type="text" id="ten"><br /><br />
<label>Email</label><br />
<input type="email" id="email"><br /><br />
<label>Mật Khẩu</label><br />
<input type="password" id="matkhau"><br /><br />

Sau khi đã tạo các thẻ input thì bạn bắt đầu nhập code để tạo hiệu ứng cho những thẻ input đó:

<script> 
superplaceholder({
el: document.getElementById('ten'),
sentences: [ 'Họ và Tên Của Bạn'],
options: {
letterDelay: 100,
sentenceDelay: 1000,
startOnFocus: false,
loop: true,
shuffle: false,
showCursor: true,
cursor: '|',
}
});
</script>

Một số thuộc tính mà bạn cần lưu ý trong đoạn code trên:

  • letterDelay là thời gian giãn cách xuất hiện của từng từ.
  • sentenceDelay là thời gian giãn cách xuất hiện của từng câu.
  • startOnFocus:false là nó sẽ tự động chạy khi ta mở trang còn startOnFocus:true thì khi ta nhập vào thẻ input thì nó mới chạy.
  • loop: true là khi nó chạy hết nội dung mong muốn thì nó sẽ tiếp tục chạy còn loop: false thì nó sẽ chạy hết nội dung và ngừng lại.
  • showCursor: true là hiện thị con trỏ chạy sau chữ ngược lại thì sẽ bị ẩn.

Các thẻ input còn lại bạn thử thay đổi một vài thuộc tính để hiểu rõ hơn. Sau khi đã nhập thành công thì bạn thử nhấn vào nút Xem Kết Quả để thấy thành quả nhé!

Mình cũng gửi các bạn đường dẫn để tải về những file trong thư mục sourcesuperplcaeholderjs để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây bạn đã có thể tạo được hiệu ứng giúp cho thẻ input của mình thêm sinh động hơn. 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ẻ!

Load WooCommerce Stores in 249ms!