Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Membangun Formulir Ramah-Ponsel denganSaran Domain Email

by
Read Time:29 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Tutorial ini akan mengajarkan Anda bagaimana membuatformulir web yang responsif yang melampaui pengaturan <inputtype=”email> untuk membantu pengguna memasukkan informasi alamat email.Formulir ini akan membantu pengguna (terutama pengguna ponsel) denganmenyarankan domain email paling populer secara otomatis.


Perkenalan

Mendesain untuk ponsel merupakan hal besar kini di desain web. Dengan pertumbuhan angka yang tinggi para pengguna mengakses konten dari perangkat ponselnya, metode desain seperti desain yang responsif menjadi praktik standar dalam meningkatkan penggunaan.

Tujuan dari tutorial ini adalah tentu saja untuk melakukan hal tersebut—gabungan teknik desain web yang responsif untuk meningkatkan perhatian pada penggunaan dari sudut pandang telepon selular.

Jadi, mari menyelaminya dengan lebih dulu memahami perhatian pada penggunaan yang kita maksudkan.


Permasalahan

Mari kita hadapi, mengisi formulir dari perangkat mobile membuat kita frustrasi. Tetapi seperti prinsip umumnya, Anda dapat mengatakan bahwa semakin banyak kolom formulir Anda, semakin kecil kemungkinan pengguna melengkapi formulirnya.  Mengapa? Karena memasukkan banyak informasi dari perangkat mobile adalah hal yang lebih sulit daripada dengan desktop tradisional atau laptop dikarenakan layar dan/atau keyboard virtual yang lebih kecil.

Jalan Keluar dengan Software

Pembuat ponsel menyadari permasalahan ini dengan input perangkat dan membuat solusi software untuk membantu pengguna lebih baik.  Sebagai contoh, lihatlah iPhone Apple. Karena keyboard iPhone virtual, huruf yang ditampilkannya dapat berubah sewaktu-waktu tergantung konteks.  Jadi, pengembang dapat memberikan label sebuah elemen <input> atribut ketik dan keyboard akan menampilkan huruf yang relevant dengan tipe data yang diminta kolom formulir.


Seperti yang Anda lihat, jika Anda memasukkan teks normal, Anda mendapatkan keyboard standar. Jika Anda memasukkan alamat email, maka simbol “@” dan “.” (titik) menjadi penting.  Atau, jika Anda memasukkan angka, keyboard akan berubah untuk memberikan Anda angka terlebih dahulu!

Memahami Anatomi Alamat Email

Pikirkan anatomi dari alamat email—apa yang dimiliki alamat email pada umumnya? Masing-masing email memiliki tiga bagian kunci:

  1. Nama pengguna
  2. Simbol “at” (@)
  3. Domain
    1. Setiap domain memiliki titik (.)

Jadi, ketika pengguna menghadapi sebuah kolom formulir yang menanyakan email, kita tahu bahwa aka nada keharusan untuk menggunakan simbol @ dan titik, karena hal itu merupakan hal umum pada setiap alamat email.  Karena itu, pengaturan <input type="email">  membantu pengguna! Hal ini memberikan akses yang lebih mudah pada komponen penting setiap alamat email.

Mengapa Berhenti di sana?

Sangat mungkin kita menyediakan lebih banyak bantuan untuk pengguna memasukkan alamat email mereka. Persentase besar pengguna menggunakan domain email yang sangat umum. Pencarian Google cepat akan menunjukkan beberapa domain email populer, yakni:

  • @aol.com
  • @hotmail.com
  • @gmail.com
  • @yahoo.com
  • dan seterusnya

jika sebagian besar basis pengguna Anda menggunakan domain email yang sama, mengapa membuatnya kosong? Bagaimana kalau kita menyediakan “saran otomatis” pada pengguna ketika mereka mengisi porsi email mereka pada formulir?  Dengan cara ini, ketika mereka mulai mengetik “y” pada “yahoo.com”, mereka akan mendapatkan saran mengatakan, “hey, apakah Anda mencoba memasukkan “yahoo.com”? Jika ya, cukup tekan di sini dan kita akan mengisi sisanya untuk Anda!”  Hal ini sangat menugkin dari sudut pandang desain dan itulah apa yang akan kita lakukan pada tutorial kali ini.


Langkah 1: Memulai dengan HTML

Mari mulai degan mendapatkan beberapa HTML dasar.


Langkah 2: Menambahkan Dependensi

Sekarang, mari tambahkan link pada markup dependensi. Pertama, kita akan memasukkan link pada jQuery versi Google juga link pada “script.js” yang akan menahan kode javascript yang kita buat nantinya.  Mari letakkan dengan benar sebelum menutup </body> tag .

Mari juga masukkan sebuah link pada file CSS kita (yang belum kita buat). Anda dapat meletakkannya <head> pada elemen .


Langkah 3: Mendesain Fleksibilitas

Karena halaman ini akan menjadi responsif dan fleksibel pada posel, kita harus memastikan untuk mengatur viewport sehingga ponsel dapat menampilkan halaman kita dengan baik.  Jika Anda ingin analisis yang lebih mendalam tentang apa yang dilakukan coding ini lebih tepatnya, pelajari lebih lanjut artikel Ian Yates' tentang meta tag viewport. Atau, cukup tambahkan potongan kode berikut ini <head> pada elemen Anda.


Langkah 4: Membuat Container

Mari mulai dengan menambahkan container utama dan deksripsi tentang apa tujuan halaman Anda:

Markup dasar kita akan terlihat seperti ini:



Langkah 5: Membuat Formulir

Sekarang mari sisipkan markup untuk formulir kita. Kita akan menggunakan daftar tak teratur untuk membantu kita memberikan struktur dan pengertian semantik pada formulir kita.


Catatan: Jangan terlalu khawatir karena kita belum memberikan elemen <label> dan <input> semua atribut normal. Karena tutorial ini tidak akan mengulas tentang mengatur dan pengumpulan formulir, maka kita tidak perlu mencemaskan hal tersebut.

Catatan Lain: Markup kita untuk saran domain actual akan dimasukkan menggunakan javascript, itulah mengapa kita tidak memilikinya di sini.


Langkah 6: Struktur Halaman dengan CSS

Mari mulai dengan memberikan halaman kita beberapa style dengan CSS. Pertama, kita akan membuat style pada elemen <body>

Di sini, kita mengatur warna latar belakang, dan beberapa default untuk tipografi kita seperti tipe ukuran, warna, dan tinggi baris. Kita juga mengatur susunan huruf yang baik dari Halvetica untuk badan teks kita.


Langkah 7: Menjadi Responsif (Mengalir)

Kita ingin halaman kita menjadi fleksibel pada posel. Jadi, dua komponen kunci yang akan kita gunakan untuk mencapainya adalah dengan: persentase dan aturan luas-max.

Cara Lama (Luas Fix)

Dengan memperhatikan HTML kita, Anda akan melihat <div id="container"> adalah container utama kita untuk konten halaman kita. Jadi, mari lihat bagaimana kita dapat melakukannya secara tradisional: 

Kita menggunakan CSS untuk menambahkan beberapa styling dasar. Kita juga menggunakan luas fix 500px dengan beberapa padding untuk konten kita dan margin: 0 auto center div kita pada bagian tengah halaman.  Permasalahan dengan pengaturan luas div dengan nilai fix (dalam pixel) adalah ketika kita berada di bawah luas fix kita (500px) maka beberapa konten kita akan dipotong. 


Cara yang Lebih Baik (Luas yang Cair)

Untuk membuat container kita fleksibel, kita akan mengeluarkan luas fix kita dan sebaliknya, menggunakan persentase. Berikut adalah nilai yang akan kita tambahkan/ubah:

Di sini, kita mengatur luas container menjadi 80% dari viewport browser dengan lapisan/padding 5% pada masing-masing sisi. Anda mungkin mengatakan “tetapi itu hanya menambahkan 90%!” dan Anda benar!  10% lainnya sebenarnya digunakan sebagai margin (5% masing-masing sisi). Kita tidak perlu spesifik mengaturnya karena telah diatur dengan margin:0 auto

Juga, kita menambahkan luas-max:500px karena kita tidak ingin formulir ktia menjadi lebih besar dari itu. Jadi, jika seseorang memiliki jendela browser 2100px, div container kita tidak akan menjadi 80% terhadap jendela tersebut, tetapi ia akan berhenti meluas pada 500px! Keren, tidak?


Sekarang Anda dapat melihat bagaimana konten kita berubah ukurannya tergantung ukuran layar.


Langkah 8: Styling Tipografi (CSS)

Anda mungkin memperhatikan tipe <h1> berjalan padanya sendiri ketika ukuran browser mengecil dan teks menjadi ke baris selanjutnya. Kita akan memperbaiki hal tersebut dengan menambahkan beberapa style tipografi pada header kita:

Sekarang Anda dapat melihat bagaimana ia menjadi satu.



Langkah 9: Styling Formulir (CSS)

Mari lepaskan daftar styling default yang mengelilingi elemen formulir kita dan berikan beberapa jarak:

Catatan: kita menggunakan peletakan relatif pada elemen li karena kolom saran kita akan berada tepat di tengahnya nanti.

Sekarang kita akan menambahkan beberapa styling pada forulir kita dan kolomnya:

Anda akan memperhatikan kita mengatur kolom <input />  dengan luas 100%. Dengan lapisan tradisional kita, hal ini akan membuat input meluas di luar parent container! Untuk memperbaikinya, kita menggunakan aturan box-sizing:border-box.  Pengaturan ini akan memberitahukan browser untuk mengkalkulasikan luas elemen pada 100%, mengabaikan padding/lapisan atau garis tepi yang mungkin dimiliki; sehingga membuatnya selalu pas dengan parent container.  Untuk mempelajari lebih jauh tentang properti ini, lihatlah artikel Ian Yates Mendorong Elemen Formulir Responsif untuk Bekerja dengan Baik.

Sekarang, kita telah mendapatkan tampilan formulir yang layak dengan struktur dan spasi! 



Langkah 10: Styling Tombol Kumpulkan (CSS)

Sekarang kita akan menerapkan beberapa style pada tombol kumpulkan. Kita akan membuatnya menonjol secara visual seperti tombol kumpulkan atau tombol action pada umumnya:

Berikut adalah deskripsi apa yang tengah kita lakukan:

Ukuran Tombol
Kita mengatur luas 80% yang akan bekerja dengan baik pada ukuran yang lebih kecil. Tetapi ketika pada btowser desktop kita tidak ingin tombol membentang di seluruh formulir. Jadi, kita menggunakan pengaturan luas-max yang bermanfaat untuk memberitahukan browser untuk tidak menampilkan tombol lebih dari 300px.
Tengah
Kita mengatur tampilan untuk memblokir dan memberikan margin otomatis. Perintah ini ajan mengetengahkan tombol pada parent div.
Styling Visual
Kita menambahkan beberapa style visual menggunakan garis tepi, bayangan-kotak, dll. Kita juga menggunakan fitur latar belakang gradien CSS. Anda dapat menemukan generator yang sempurna untuk jenis kode ini secara online.  


Langkah 11: Membuat markup Saran

Pada poin ini kita telah emiliki formulir yang nyaman dipandang yang bekerja dengan baik pada posel tanpa harus menggunakan media pertanyaan! Sekarang kita akan membuat markup untuk saran domain email dan memberikan style. 

Ingat, markup ini adalah sesuatu yang akan kita masukkan dengan javascript. Jadi, sekali kita memasukkan dokumen kita dan memberikan style yang kita sukai, kita akan mengambilnya kembali. Melakukan hal ini lebih mudah untuk tujuan pengembangan.

Jadi, mari kita masukkan elemen <span> tepat setelah elemen <input />  kita:



Langkah 12: Styling Kolom Saran (CSS)

Seperti yang dapat Anda lihat, saran kita hanya terlihat seperti teks saat ini. Jadi, mari tambahkan beberapa style CSS untuk membuatnya lebih terlihat seperti kolom saran:

Berikut adalah deskripsi apa yang kita lakukan di sini:

Tinggi Baris
Memberikan kolom sran kita peraturan line-height bukan peraturan tinggi yang akan mengetengahkan teks secara vertikal di dalam kotak. 
Posisi
Seperti yang dapat Anda lihat, kita menggunakan posisi absolut untuk kolom saran kita. Kita mengatur offset sedikit dari kiti dan dari atas sehingga tidak menutupi kolom input.
Styling Visual
Kita menambahkan beberapa style visual menggunakan garis tepi, bayangan kotak, dll. Kita juga menggunakan latar belakang CSS3 fitur gradien (seperti yang kita lakukan sebelumnya pada elemen tombol).


Langkah 13: Kolom Saran Style Popover (CSS)

Sekarang kita memiliki kolom saran yang seluruhnya telah diberi style, tetapi kita ingin membuatnya terlihat seperti saran pada kolom input.  Kita akan menggunakan segitiga kecil untuk mencapainya. Untuk membuat kolom terlihat dapat diklik, kita juga akan memastikan bahwa hover state yang menunjukkan kolom dapat diklik:

Segitiga dapat ditambahkan menggunakan gambar, tetapi kita melakukannya dengan menggunakan CSS murni. Karena kita menggunakan selector pseudo, kita harus menggunakan unikode segitiga tersebut karena kita menggunakan peraturan content:””. Kemudain kita hanya menggunakan memposisikan untuk meletakkannya di tempat yang kita inginkan.


Sekarang kita memiliki sesuatu yang terlihat seperti ini:



Langkah 14: Menambahkan Kolom Saran Hover/State Aktif (CSS)

Sekarang kita ingin menambahkan sedikit interaktif pada kolom saran kita. Kita akan membuat hover dan state aktif cukup dengan mewarnai latar belakang. Hal ini akan memastikan kita memberitahu pengguna bahwa mereka dapat dan telah berinteraksi dengan kolom.

Kita harus memastikan bahwa kita mengubah warna segitiga kecilnya juga!

Sekarang kita memiliki sesuatu yang terlihat seperti ini:


Selamat! Sekarang kita telah selesai dengan markup HTML/CSS. Sekarang kita hanya perlu menambahkan interaktif javascript.

Catatan: Jangan lupa untuk menghapus elemen <span>  sekarang. Kita akan memasukkannya menggunakan jQuery nanti.


Langkah 15: Memahami Aspek Interaktif

Sebelum kita benar-benar menyelam pada menuliskan skrip saran domain, mari pastikan kita mendaftar dan memahami apa yang coba kita capai.

Membuat Tumpukan Domain Email

Apa yang kita ingin skrip kita lakukan adalah untuk mendeteksi apabila pengguna mencoba memasukkan sebuah domain email yang cocok dengan beberapa penyedia jasa email pada web. Pencarian Google cepat akan menunjukkan berikut adalah beberapa domain penyedia jasa email pada web:

  • @aol.com 
  • @comcast.net 
  • @gmail.com 
  • @hotmail.com 
  • @me.com 
  • @msn.com 
  • @yahoo.com

Tentu saja Anda dapat menambahkan/mengurangi domain email pada daftar ini jika Anda inginkan, tetapi ini adalah awal yang baik untuk apa yang kita coba capai.

Menyarankan Domain

Jadi, bagaimana jika pengguna mencoba untuk memasukkan salah satu alamat domain ini? Kemudian kita akan menggunakan skrip kita untuk menyarankannya! Hal ini akan memungkinkan pengguna kita untuk cukup meng-klik/mengetuk pada saran dan memiliki domain email yang ditambahkan pada apa yang sudah mereka masukkan. Jika ini bukan yang mereka inginkan, mereka dapat mengabaikan saran.


Langkah 16: Mempersiapkan jQuery

Mari buat file “script.js” ktia dan mulai dengan mengikuti koder berikut untuk menerapkan  jQuery:


Langkah 17: Menambahkan Kotak Saran pada DOM

Jika Anda mengingat kita memasukkan elemen dengan kelas “saran” setelah masing-masing elemen input dan memberikan style sesuai dengan bagaimana kita menginginkan kotak saran kita muncul. Ketika kita telah memberikan style dengan benar, kita hapus markup dari HTML kita.

Baik, sekarang kita akan memasukkan markup menggunakan jQuery. Kita akan menggunakan metode insertAfter():

Baris kode ini akan menemukan setiap elemen input pada halaman yang memiliki atribut “type=email” (yang digunakan pada masing-masing elemen input kita). Kode ini kemudian akan memasukkan markup yang kita spesifikkan (<span class="suggestion"></span>) setelah masing-masing elemen (kemudian namanya). Kemudian kita sembunyikan semua kejadian pada kotak saran (karena kita belum memiliki apapun untuk disarankan sekarang!)

Menambahkannya dengan javascript bekerja dengan baik karena markup ini hanya perlu ada JIKA pengguuna memiliki javascript yang diaktifkan pada computer mereka.


Langkah 18: Mendapatkan Nilai Input Pengguna

Untuk menentukan domain email mana yang disarankan, kita perlu mengetahui nilai apa yang pengguna masukkan. Jadi, kita perlu memperhatikan kolom input yang difokuskan dan setiap pengguna menekan tombol pada keyboard kita akan menangkap nilai input baru dan menyimpannya pada variabel.

Kita dapat mengetahui apa yang pengguna masukkan dengan menggunakan event keyup(). Dengan melampirkan keyup pada masing-masing elemen input, kita dapat memicu skrip kita untuk mendapatkan nilai input pada kolom input setiap kali satu huruf dimasukkan.


Jadi sekarang, setiap pengguna menambahkan huruf lain pada kolom input, jQuery akan menangkap nilai dan menyimpannya pada variabel “value”/nilai.


Langkah 19: Memeriksa Simbol @

Sekarang input pengguna disimpan pada variabel “value”. Bagaimanapun, kita akan mengabaikan apapun nama pengguna mereka. Jika variabel nilai kita sama dengan “joe” hal tersebut tidak akan membantu kita karena kita tidak tahu domain apa yang coba pengguna kita coba masukkan. Tetapi, jika variabel nilai kita sama dengan “joe@a” makan kita dapat menebak mungkin pengguna kita coba memasukkan joe@aol.com dan kita dapat menyarankan “@aol.com”.

Jadi, apa yang ingin kita lakukan adalah untuk memeriksa variabel nilai pada masing-masing event keyup() dan melihat jika ia mengandung simbol “@”. Jika ia memiliki simbol “@”, kita tahu pengguna telah siap memasukkan alamat domain email mereka.

Jadi, kita akan menyimpan posisi simbol “@” pada sebuah variabel untuk kita gunakan nanti. Kita akan melakukan hal ini menggunakan metode indexOf(). Kita cukup membuat variabel baru (a_pos) dan mengaturnya sama dengan nilai index “@” pada variabel nilai.


Perhatikan bahwa jika simbol “@” belum dimasukkan, variabel a_pos kita akan menjadi default pada nilai -1. Jika tidak, kita mendapatkan posisi huruf kita pada tali/string.


Langkah 20: Menyimpan Elemen Parent untuk Konteks

Kita juga ingin menyimpan elemen parent untuk elemen input apasaja yang difokuskan oleh pengguna. Hal ini akan berguna ketika kita menampilkan markup saran kita karena kita tidak akan ingin menunjukkan semua kotak saran pada halaman. Tetapi, kita akan menunjukkan salah satu yang difokuskan (lebih jauh tentang ini nanti).


Langkah 21: Menyarankan Domain Email

Sekarang kita memiliki semuanya di tempat untuk melihat apakah pengguna benar-benar memasukkan sebuah alamat email! Jadi, apa yang kita akan lakukan sekarang adalah untuk mengatur statement if/else.

Jika variabel a_pos bernilai -1 kita mengetahui bahwa pengguna belum measukkan simbol “@”. Jika bernilai lain, kita mengetahui bahwa simbol “@” telah dimasukkan. Jadi, mari atur setup if/else.

Memprediksi Domain

Jika simbol ‘@’ pada kenyataannya telah dimasukkan, kita ingin memeriksa dan melihat huruf apa SETELAH simbol @. Jika ia  dimulai dengan “g” kita dapat menyarankan “gmail.com” pada pengguna. Jika ia “y” kita dapat menyarankan “yahoo.com” dan seterusnya.

Jadi kita akan menempelkan statement “if” kita dari atas:

Kode ini mengatakan “jika huruf pertama bernilai SETELAH posisi simbol ‘@’ sama dengan ‘a’, maka sarankan ‘aol.com’ pada pengguna.”


Catatan: Anda akan melihat kita memilih kelas .suggestion. karena kita memiliki banyak kelas ‘saran’, hal ini akan memilih setiap kelas ‘saran’ pada halaman, yang tidak kita inginkan. Karena itu, kita mengatur variabel ‘parent’ dan menggunakannya sebagai selector konteks: $(.suggeston’, parent). jQuery sekarang hanya akan memilih item dengan kelas ‘saran’ pada konteks yang difokuskan parent kolom input!


Langkah 22: Melengkapi Semua Saran Domain Email

Sekarang kita memiliki kode untuk menyarankan domain email, kita hanya perlu untuk menguji nilai lain, seperti ‘g’ untuk ‘gmail.com’ dan ‘y’ untuk ‘yahoo.com’. Karena kita menggunakan statement “if”, mari lampirkan semua saran alamat domain menggunakan statement else if.

Jadi, mari tambahkan saru untuk ‘comcast.net’

Sekarang satu untuk ‘gmail.com’

Sekarang satu untuk 'hotmail.com':

Sekarang satu untuk 'live.com':

Sekarang satu untuk 'yahoo.com':

Menyarankan Domain yang Huruf Pertamanya Cocok

Sekarang kita ingin menyarankan ‘msn.com’ dan juga ‘me.com’. keduanya dimulai dengan ‘m’ sehingga kita akan melakukan penjaringan statement if/else. Kita akan beranggapan ‘msn.com’ adalah alamat domain yang banyak digunakan, jadi kita akan menyarankannya lebih dulu:

Potongan kode ini mengatakan “jika karekater SETELAH simbol ‘@’ adalah ‘m’ maka jalankan kode di dalam”. Kode di dalam mengatakan ‘jika huruf KEDUA SETELAH simbol ‘@’ adalah ‘e’ kemudian sarankan ‘me.com’. Jika tidak, sarankan ‘msn.com’

Bagaimana Jika Tidak Ada Kecocokan

Bagaimana jika pengguna memasukkan sesuatu seperti “john@z”? kita tidak memiliki saran domain email yang dimulai dengan huruf ‘z’. jadi, pada akhir statement if/else, kita akan meletakkan statement else yang menyembunyikan kotak saran. Secara mendasar mengatakan “jika tidak ada saran yang cocok dengan yang domasukkan pengguna, sembunyikan kotak saran.”


Langkah 23: Menutup Statement a_pos if/else

Jika Anda mengingat dari sebelumnya, kita memiliki statement if/else seperti ini:

Kita telah measukkan semua saran domain email JIKA ada simbol ‘@’ yang dimasukkan. Jika simbol ‘@’ belum dimasukkan, kita cukup menyembunyikan kotak saran. (Hal ini berarti jika pengguna mengetik “john@y”, saran “yahoo.com” akan muncul. Tetapi, jika pengguna menekan tombol hapus maka kotak saran akan menghilang).

Kode Keyup Keseluruhan

Jadi, keseluruhan blok kode kita ketika pengguna membuat keystroke akan terlihat seperti ini:

Jika Anda menguji hal ini pada browser, Anda akan ,elihat saran muncul berdasarkan alamat domain email yang Anda coba masukkan, mengklik saran tersebut tetapi tidak akan berdampak apapun—itu adalah langkah kita selanjutnya!



Langkah 24: Melampirkan Domain Email Disarankan

Jadi apa yang terjadi jika pengguna mengklik salah satu saran domain email kita? Kita perlu melampirkan domain yang disarankan pada apa yang mereka masukkan sejauh ini.

Jadi, misalnya, pengguna memasukkan “john@a”, hal ini akan memicu saran domain “aol.com” untuk muncul. Jika pengguna mengklik saran itu, kita ingin menyelamatkan usaha mereka untuk mengetik sisanya dan menempelkannya pada apa yang mereka telah ketik sejauh ini. Jadi nilai kolom input akan berubah dari “john@a” menjadi john@aol.com!

Untuk mencapai hal ini, kita akan perlu memperhatikan ketika pengguna mengklik kotak saran. Jadi mari biarkan jQuery yang melakukannya:


Langkah 25: Menyatakan Variabel yang Kita Butuhkan

Untuk menempelkan dengan tepat domain email yang disarankan yang dipilih oleh pengguna, kita akan membutuhkan beberapa variabel.

Konteks Parent

Pertama, kita akan memilih parent dari kotak saran berdasarkan apapun yang dipilih. Sekali lagi, hal ini akan digunakan untuk membuat pilihan pada konteks kolom input yang difokuskan.

Saran Domain Email

Kita harus mengetahui saran sebenarnya apa yang kita buat untuk pengguna. Jadi misalnya, jika kita menyarankan “aol.com”, mari simpan nilai tersebut dalam variabel. Karena kita berada di dalam kotak saran yang tengah dipilih, kita akan menggunakan metode jQuery $(this) dan text() untuk mendapatkan nilai dari apa yang disarankan.

Nilai Input Pengguna Kini

Kita harus mengetahui apa yang dimasukkan pengguna sejauh ini. Jadi, jika mereka memasukkan “john@a”, kita akan menyimpannya pada variabel. Di sini adalah tempat kita menggunakan variabel parent yang telah kita atur sebelumnya untuk konteks pemilihan (karena kita tidak ingin memilih semua kejadian pada kelas ‘saran’, kita hanya ingin satu yang diklik).

Letak Simbol ‘@’

Sekali lagi kita perlu tahu posisi dari symbol ‘@’ pada garis yang dimasukkan pengguna. Jadi kita akan menggunakan metode indexOf yang kita gunakan sebelumnya. Hal ini akan memeriksa variabel input_val (apa yang dimasukkan oleh pengguna sejauh ini) dan mencari posisi dari simbol ‘@’.

Nama Pengguna Email

Jika pengguna mengklik “aol.com” kitatahu bahwa domain email mereka adalah “aol.com”. Jadi kita harus memiliki semua yang telah mereka masukkan SEBELUM simbol ‘@’. Yakni nama pengguna email mereka. Ketika kita memiliki nilai tersebut, kita dapat menempelkan saran domain email padanya.

Untuk melakukan hal ini kita akan membuat sebuah variabel bernama before_a dan mengaturnya sama dengan hasil metode substr.

Metode substr digunakan pada variabel input_val (pengguna saat ini memasukkan nilai pada kolom onput). Ini akan mengekstrak huruf dari garis, awal dan akhir parameter yang kita spesifikkan.



Langkah 26: Melampirkan Saran

Sekarang kita telah memiliki semua variabel kita pada tempatnya, kita dapat melampirkan saran domain email yang diklik pengguna. Kita akan melakukan hal ini dengan memilih kotak input yang mereka tengah fokuskan (kita dapat melakukan ini pada konteks parent, seperti yang dijelaskan sebelumnya) dan kemudian mengatur nilai input menggunakan variabel yang kita atur:

Ini mengatur nilai inout pada apapun yang pengguna kita telah masukkan hingga simbol ‘@’, simbol ‘@’ itu sendiri, dan kemudian domain email yang disarankan yang mereka klik.

Jangan lupa untuk menyembunyikan kotak saran ketika pengguna telah mengkliknya:

Untuk representasi visual dari apa yang telah kita lakukan, lihatlah gambar berikut ini:


Kode Seluruhnya untuk Melampirkan Domain Email yang Disarankan


Langkah 27: Menyembunyikan Kotak Saran

Bagaimana jika pengguna mengetik sebuah alamat email dan tidak menggunakan domain email yang kita sarankan? Ketika mereka mengklik di luar kolom input (blur event) kita harus menyembunyikan saran, karena hal tersebut tidak relevan. Jadi, kita akan melakukannya dengan menggunakan kode berikut ini:

Bagaimanapun, ada masalah dengan hal ini. Jika pengguna mengklik saran, tidak hanya itu akan menghilangkan fungsi $(‘.suggestion).click, tetapi juga akan menghilangkan fungsi $(‘input[type=email]’).blur (karena kotak saran berada di luar elemen input). Hal ini akan membuat domain email yang kita sarankan tidak terlampir. Jadi kita harus memperbaiki ini.


Langkah 28: Menyembunyikan Kotak Saran: Perbaikan

Kita dapat memperbaiki permasalahan ini dengan kembali melihat event mouse pada kotak saran menggunakan variabel Boolean.

Kita akan membuat variabel yang disebut “mouseOver”. Ini cukup menjelaskan dirinya. Jika pengguna melayang pada kotak saran, kita akan mengatur nilainya menjadi “true”. Jika mereka menjauhkan mouse (atau tidak melayang pada kotak saran) variabel “mouseOver akan ter-reset menjadi false/salah (nilai default).

Menyesuaikan Fungsi yang Menyembunyikan Kotak Saran

Sekarang kita akan mengetahui jika pengguna melayang pada kotak saran dan akan mengkliknya, kita akan menyesuaikan kode dari langkah sebelumnya:

Apa yang Telah Kita Lakukan

Idenya di sini adalah menemukan maksud pengguna. Jika mereka melayang pada kotak saran, kita tahu mereka berencana mengkliknya. Tetapi, jika mereka tidak melayang di sekitar itu, kemudian mengklik di luar kolom input (blur) kita dapat mengeksekusi kode untuk menyembunyikan kotak saran, karena kita tahu pengguna tidak berencana mengkliknya.

Jadi sekarang, kode utnuk menyembunyikan ktak saran akan terlihat seperti ini:


Langkah 29: Kode Akhir Lengkap Kita

Kode javascript akhir kita, dengan komentar, akan terlihat seperti ini:

Selamat! Anda telah membuat formulir web yang responsive untuk membatu pengguna dengan alamat domain email populer. Ada beberapa peningkatan yang dapat dilakukan pada skrip ini. Contohnya, bagaimana jika pengguna memasukkan “john@microsoft.com"? Saran "@msn.com" akan muncul hingga mereka tidak fokus pada kolom input tersebut lagi. Anda dapat menambahkan baris kode yang menyembunyikan saran jika pengguna tidak mengkliknya dalam beberapa huruf tertentu. Misalnya, jika mereka mengetik, “john @micro”, kita dapat bernaggapan mereka tidak ingin menggunakan saran yang kita telah sediakan. Pada poin ini, kita dapat menyembunyikan saran kita.

Bermain-mainlah dengan skrip dan HTML serta lihat penambahan apa yang dapat Anda buat untuk meningkatkan pengalaman pengguna dalam mengisi formulir!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.