Hướng dẫn tạo placeholder chữ chạy cho khung tìm kiếm

Hướng dẫn tạo chữ chạy (placeholder) khung tìm kiếm (search) cho blogspot đơn giản nhất, thích hợp để áp dụng cho các trang bogspot bán hàng.

Các bạn có thể xem demo bên dưới

Đầu tiên các bạn viết Script như sau đặt trước thẻ đóng </body> của template

<script>
    //<![CDATA[
    ! function(t) {
        "use strict";
        t.fn.placeholderTypewriter = function(e) {
            var n = t.extend({
                delay: 50,
                pause: 1e3,
                text: []
            }, e);

            function r(t, e) {
                t.attr("placeholder", ""),
                    function t(e, r, u, a) {
                        var i = n.text[r],
                            o = e.attr("placeholder");
                        if (e.attr("placeholder", o + i[u]), u < i.length - 1) return setTimeout(function() {
                            t(e, r, u + 1, a)
                        }, n.delay), !0;
                        a()
                    }(t, e, 0, function() {
                        setTimeout(function() {
                            ! function t(e, r) {
                                var u = e.attr("placeholder"),
                                    a = u.length;
                                if (e.attr("placeholder", u.substr(0, a - 1)), a > 1) return setTimeout(function() {
                                    t(e, r)
                                }, n.delay), !0;
                                r()
                            }(t, function() {
                                r(t, (e + 1) % n.text.length)
                            })
                        }, n.pause)
                    })
            }
            return this.each(function() {
                r(t(this), 0)
            })
        }
    }(jQuery);

    var placeholderText = ['Bạn muốn tìm gì?', 'Trang sức cưới?', 'Trang sức kim cương?', 'Dịch vụ cưới hỏi?', 'Quà tặng đính hôn?'];
    $('.search-auto').placeholderTypewriter({
        text: placeholderText
    });
    //]]>
</script>

Trong đó search-auto là "class" của khung search hoặc "id" của khung search ví dụ như dưới

Nếu là class $('.search-auto')
Nếu là id $('#search-auto')

<input type="text" class="search-auto"/>
Hoặc
<input type="text" id="search-auto"/>

Nếu thư viện link jQuery blog của các bạn đang để là async='async' thì các bạn dùng code bên dưới

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        ! function(t) {

            "use strict";

            t.fn.placeholderTypewriter = function(e) {

                var n = t.extend({

                    delay: 50,

                    pause: 1e3,

                    text: []

                }, e);



                function r(t, e) {

                    t.attr("placeholder", ""),

                        function t(e, r, u, a) {

                            var i = n.text[r],

                                o = e.attr("placeholder");

                            if (e.attr("placeholder", o + i[u]), u < i.length - 1) return setTimeout(function() {

                                t(e, r, u + 1, a)

                            }, n.delay), !0;

                            a()

                        }(t, e, 0, function() {

                            setTimeout(function() {

                                ! function t(e, r) {

                                    var u = e.attr("placeholder"),

                                        a = u.length;

                                    if (e.attr("placeholder", u.substr(0, a - 1)), a > 1) return setTimeout(function() {

                                        t(e, r)

                                    }, n.delay), !0;

                                    r()

                                }(t, function() {

                                    r(t, (e + 1) % n.text.length)

                                })

                            }, n.pause)

                        })

                }

                return this.each(function() {

                    r(t(this), 0)

                })

            }

        }(jQuery);



        var placeholderText = ['Bạn muốn tìm gì?', 'Trang sức cưới?', 'Trang sức kim cương?', 'Dịch vụ cưới hỏi?', 'Quà tặng đính hôn?'];

        $('.search-auto').placeholderTypewriter({

            text: placeholderText

        });

    })

    //]]>

</script>

Để nén JS trên cho gọn các bạn có thể dùng công cụ https://javascript-minifier.com