Cara membuat input tags dengan Javascript HTML dan CSS

bymandankoding - 0

 


Tags input biasanya difungsikan untuk menyimpan kata kunci sebuah artikel agar memudahkan pengunjung artikel tersebut untuk mencari sesuai yang dicari, salah satunya saat kita mengupload artikel di blog atau posting video di youtube.

Dengan tags input kita bisa memasukkan kata kunci lebih banyak dengan kalimat-kalimat yang berbeda. 

Dalam tutorial kali ini kita akan membuat tags input menggunakan Javascript HTML dan CSS. langsung saja ke kodenya.

Untuk video tutorial: Tags input in HTML CSS and Javascript | tags input in Javascript


1. Pertaman kita buat satu file dengan nama index.html. Setelah dibuat dan copy kan kode dibawah ke file index.html

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tags</title>
</head>
<body>
    <div class="contents">
        <h4 class="title"><i class="fa fa-tags"></i> Tags</h4>
        <br>
        <label>Press enter to add Tags</label>
        <br>
        <br>
        <div id="tags">
            <span class="tag"><span class="close">&times;</span>JavaScript</span>
            <input type="text" id="tag-typer" placeholder="Add Tags">
        </div>
    </div>
</body>
</html>



Hasil seperti gambar dibawah ini:

Hasil.

Setelah kode diatas berhasil kita jalankan, sekarang kita akan membuat file CSS dengan nama style.css.

Style.css


body {
    background-image: linear-gradient(to bottom, #464660, #368b85);
    height: 100vh;
}

* {
    margin: 0;
    padding: 0;
}

.contents {
    border-radius: 5px;
    background-color: #fafafa;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(167, 161, 161, 0.3);
    width: 500px;
}

.title {
    font: bold 14pt "Trebuchet MS";
    color: rgb(209, 84, 0);
}

#tags {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    background-color: #fafafa;
    border: 1px solid #9c9c9c;
    margin: auto;
}

#tag-typer {
    outline: none;
    border: none;
    padding: 6px;
    margin: 3px;
    margin-right: -25px;
    width: 100px;
    background-color: transparent;
    font-size: 14px;
    color: #333;
}

.tag {
    display: inline-block;
    background: rgb(0, 0, 0);
    color: #fff;
    padding: 5px 10px;
    margin: 2px 2px 2px 20px;
    font: normal 16px sans-serif;
    position: relative;
    cursor: default;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: swing 1s;
    -o-animation: swing 1s;
    animation: swing 1s;
}

.tag:before {
    content: "";
    position: absolute;
    width: 0px;
    background: inherit;
    height: 9px;
    border: 10px solid #fafafa;
    border-right-color: black;
    -webkit-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
    left: -19px;
    top: 0;
}

.tag:after {
    content: "";
    width: 6px;
    height: 6px;
    -webkit-border-radius: 3px;
    -moz-border-redius: 3px;
    border-redius: 3px;
    background: #fff;
    position: absolute;
    left: -3px;
    top: 12px;
    box-shadow: inset 1px 1px 0 #ccc;
}

.tag .close {
    position: absolute;
    background: inherit;
    left: -4px;
    z-index: 3;
    visibility: hidden;
}

.tag:hover .close {
    visibility: visible;
}

.close:hover {
    color: rgba(0, 0, 0, .5);
}


Setelah kode di atas di buat, dan tambahkan kode di bawah ini dan telak kan di antara <head>....</head> dibawah kode <title> di file index.html yang telah kita buat sebelumnya. 



<link rel="stylesheet" href="style.css">
<script src="fontawesome/all.js"></script>
<script src="jquery.js"></script>


Untuk file fontawesome dan jquery.js silahkan download pada link di bawah ini.

File Fontawesome 
File Jquery.js

Setelah selesai menambahkan kode dan file di atas, akan muncul hasil seperti gambar dibawah ini.




Selajutnya kita akan menambahkan kode jquery kedalam file index.html untuk menambahkan tag secara dinamis kedalam textbox seperti gambar di atas, silahkan ketikkan kode di bawah di atas tag </body>.

    <Script>
        $(document).ready(function () {

            $("#tag-typer").keypress(function (event) {
                var key = event.which;
                if (key == 13 || key == 44) {
                    event.preventDefault();
                    var tag = $(this).val();
                    if (tag.length > 0) {
                        $("<span class='tag'><span class='close'>&times;</span>"+ tag +"</span>").insertBefore(this).fadeIn(100);
                        $(this).val("");
                    }
                }
            });

            $("#tags").on("click", ".close", function() {
                $(this).parent("span").fadeOut(100);
            })

        })
    </Script>
Setelah selesai menyalin semua kode di atas, sekarang cobakan di browser untuk melihat hasilnya.
coba test seperti gambar dibawah ini: 


Oke berhasil, Semoga bermanfaat.

Untuk lebih jelasnya silahkan lihat video tutorial berikut ini:  Tags input in HTML CSS and Javascript | tags input in Javascript

Tags:

إرسال تعليق

Post a Comment (0)

أحدث أقدم