<style>
/* Tùy chỉnh placeholder */
.search-field::placeholder {
font-size: 16px;
font-style: italic;
color: #888;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function ($) {
!function (t) {
"use strict";
t.fn.placeholderTypewriter = function (e) {
var n = t.extend({
delay: 50, // Thời gian gõ từng ký tự
pause: 1000, // Thời gian nghỉ sau khi gõ xong
cursorBlinkSpeed: 500, // Tốc độ nháy con trỏ
text: []
}, e);
function r(t, e) {
t.attr("placeholder", ""); // Xóa placeholder trước
let cursor = "|"; // Biểu tượng con trỏ nhấp nháy
function typeEffect(el, textIndex, charIndex, callback) {
var text = n.text[textIndex];
if (charIndex < text.length) {
el.attr("placeholder", text.substring(0, charIndex + 1) + cursor);
setTimeout(() => typeEffect(el, textIndex, charIndex + 1, callback), n.delay);
} else {
setTimeout(callback, n.pause);
}
}
function deleteEffect(el, callback) {
var placeholderText = el.attr("placeholder");
if (placeholderText.length > 1) {
el.attr("placeholder", placeholderText.slice(0, -2) + "|"); // Xóa ký tự cuối cùng, giữ con trỏ
setTimeout(() => deleteEffect(el, callback), n.delay);
} else {
callback();
}
}
typeEffect(t, e, 0, function () {
setTimeout(() => deleteEffect(t, function () {
r(t, (e + 1) % n.text.length);
}), n.pause);
});
// Hiệu ứng nháy con trỏ
setInterval(() => {
let placeholder = t.attr("placeholder");
if (placeholder.endsWith("|")) {
t.attr("placeholder", placeholder.slice(0, -1)); // Ẩn con trỏ
} else {
t.attr("placeholder", placeholder + "|"); // Hiện con trỏ
}
}, n.cursorBlinkSpeed);
}
return this.each(function () {
r(t(this), 0);
});
};
}(jQuery);
var placeholderText = [
"Thủ thuật Theme Flatsome",
"WordPress cơ bản",
"Custom WooCommerce nâng cao",
"Link download theme Flatsome",
"WordPress nâng cao"
];
$(".search-field").placeholderTypewriter({
text: placeholderText,
delay: 70, // Điều chỉnh tốc độ gõ chữ
pause: 1200, // Điều chỉnh thời gian nghỉ giữa các chuỗi
cursorBlinkSpeed: 600 // Điều chỉnh tốc độ nhấp nháy của con trỏ
});
});
</script>
