Input Text Java

 

if (preg_match("/iPhone|iPad|Android|Windows Phone/is", $_SERVER['HTTP_USER_AGENT'])) {

    $style = "position:relative";

} else {

    $style = "width: 500px; margin: 36px 106px; position: relative;";

}

?>

<!-- Form Tìm kiếm -->

<form onsubmit="return redirectSearch()">

    <div style="<?= $style ?>">

        <input id="searchInput" type="text" placeholder=""

               style="width: 100%; padding: 10px 40px 10px 15px; border-radius: 30px; border: 1px solid #ccc; outline: none; font-size: 16px; background: #fff;">

        <button class="homesearch" type="submit" style="position: absolute; top: 55%; right: -7px; transform: translateY(-55%); background: none; border: none; cursor: pointer;">

            <i class="fa fa-search"></i>

        </button>

    </div>

</form>

<script>

    const placeholders = ["Nhập tên sản phẩm", "Tìm sản phẩm", "Tìm thuốc", "Tìm thực phẩm chức năng"];

    let index = 0, charIndex = 0;

    const input = document.getElementById('searchInput');

    // Placeholder chạy chữ

    function typePlaceholder() {

        if (charIndex <= placeholders[index].length) {

            input.placeholder = placeholders[index].substring(0, charIndex);

            charIndex++;

            setTimeout(typePlaceholder, 100);

        } else {

            setTimeout(() => {

                index = (index + 1) % placeholders.length;

                charIndex = 0;

                typePlaceholder();

            }, 2000);

        }

    }

    // Chuyển hướng URL đẹp khi tìm kiếm

    function redirectSearch() {

        let keyword = input.value.trim();

        if (keyword !== '') {

            keyword = keyword.toLowerCase().replace(/\s+/g, '-');

            keyword = encodeURIComponent(keyword);

            window.location.href = "/tim-kiem/" + keyword;

        }

        return false;

    }

    typePlaceholder();

</script>