input jelas jquery

Input jelas JQuery - Jadikan input borang lebih mudah

Dalam pembangunan bahagian hadapan, biasanya kami perlu menggunakan borang untuk mengumpul data yang dimasukkan oleh pengguna. Apabila pengguna melengkapkan input mereka, kami perlu mengosongkan kandungan dalam borang untuk memudahkan input seterusnya. Dalam HTML tradisional, kami boleh menambah butang set semula pada setiap elemen borang dan kemudian menggunakan JavaScript untuk mengosongkan input. Walau bagaimanapun, kaedah ini bukan sahaja menyusahkan tetapi juga mempunyai toleransi kesalahan yang lemah. Menggunakan JQuery menjadikan input borang penjelasan lebih mudah dan lebih dipercayai.

Artikel ini akan memperkenalkan kaedah dan teknik asas menggunakan JQuery untuk mengosongkan input, serta senario dan teknik mengosongkan input yang biasa digunakan dalam pembangunan sebenar, menjadikan input borang anda lebih mudah.

1. Kaedah dan teknik asas

1 Kosongkan kandungan satu kotak input

Jika anda hanya perlu mengosongkan kandungan satu kotak input, anda boleh. gunakan kaedah .val() .

Sebagai contoh, jika anda mempunyai kotak input dengan ID "input1", anda boleh menggunakan kod berikut untuk mengosongkan kandungan kotak input:

$("#input1").val("");

2 berbilang kotak input

Jika anda perlu mengosongkan kandungan berbilang kotak input, anda boleh menggunakan pemilih kelas untuk memilih elemen ini. Contohnya, jika anda mempunyai tiga kotak input dengan nama kelas "input", anda boleh menggunakan kod berikut untuk mengosongkan kandungan kotak input ini:

$(".input").val("");

3 borang

Jika anda perlu mengosongkan semua kotak input dalam borang, anda boleh menggunakan pemilih elemen borang untuk memilih semua kotak input dalam borang, dan kemudian gunakan kaedah .val() untuk mengosongkan kandungannya.

Sebagai contoh, jika anda mempunyai borang dengan ID "form1", anda boleh menggunakan kod berikut untuk mengosongkan kandungan semua kotak input dalam borang:

$("#form1 :input").val("");

Dalam kod di atas , :input ialah pemilih khas yang boleh memilih semua kotak input, medan teks, kotak lungsur, dsb. dalam elemen bentuk. Apabila anda memanggilnya menggunakan kaedah .val(), ia mengosongkan kandungan elemen ini.

4 Kosongkan semua kandungan dalam borang

Jika anda perlu mengosongkan semua kandungan dalam borang, termasuk bukan sahaja kotak input, tetapi juga kotak lungsur, kotak radio, kotak semak , dsb., Anda boleh menggunakan pemilih elemen borang untuk memilih elemen borang, dan kemudian gunakan kaedah .reset() untuk menetapkan semula borang.

Sebagai contoh, jika anda mempunyai borang dengan ID "form1", anda boleh menggunakan kod berikut untuk mengosongkan semua kandungan dalam borang:

document.getElementById("form1").reset();

Dalam kod di atas, tetapan semula () kaedah akan Nilai semua kotak input, kotak drop-down, butang radio, dan kotak semak ditetapkan semula kepada nilai lalainya.

2. Senario dan teknik biasa

1 Kosongkan nilai lalai dalam bentuk

Apabila kotak input, kotak lungsur dan elemen lain dalam borang mempunyai lalai. nilai yang ditetapkan, jika Jika pengguna ingin memasukkan semula, mereka perlu memadamkan nilai lalai ini secara manual. Untuk mengurangkan usaha pengguna, anda boleh menggunakan JQuery untuk mengosongkan semua nilai lalai dalam borang selepas halaman dimuatkan.

Sebagai contoh, jika anda mempunyai borang dengan ID "form1" dan anda menetapkan nilai lalai "Sila masukkan nama pengguna anda" dalam salah satu kotak input, anda boleh menggunakan kod berikut untuk mengosongkan semua kotak input dalam bentuk Nilai lalai:

$(document).ready(function(){
  $("#form1 :input").each(function(){
    if($(this).val() == $(this).attr("placeholder")){
      $(this).val("");
    }
  });
});

Dalam kod di atas, fungsi $(document).ready() akan dilaksanakan selepas halaman dimuatkan, dan kemudian fungsi .each() akan digunakan untuk melintasi semua kotak input dalam borang. Jika nilai dalam kotak input adalah sama dengan nilai atribut pemegang tempat yang sepadan, gunakan kaedah .val() untuk mengosongkannya. Pada ketika ini, pengguna boleh memasukkan kandungan secara langsung tanpa memadamkan nilai lalai secara manual.

2. Operasi selepas mengosongkan borang

Dalam pembangunan sebenar, kita selalunya perlu melakukan operasi tertentu selepas mengosongkan borang. Sebagai contoh, apabila borang berjaya diserahkan, kami mungkin mahu mengosongkan borang dan memaparkan mesej kejayaan. Untuk mengelakkan pengguna daripada melihat elemen borang menjadi kosong semasa dikosongkan, kita boleh menyembunyikan elemen borang sebelum mengosongkan borang, dan kemudian menunjukkannya selepas mengosongkannya.

Sebagai contoh, jika anda mempunyai borang dengan ID "form1", borang tersebut akan diserahkan apabila pengguna mengklik butang hantar. Untuk mengelakkan pengguna melihat borang kosong semasa borang sedang dikosongkan, anda boleh menggunakan kod berikut:

$("#submit_btn").click(function(){
  // 隐藏表单
  $("#form1 :input").hide();
  
  // 提交表单
  $.ajax({
    url: "submit.php",
    method: "post",
    data: $("#form1").serialize(),
    success: function(response){
      // 显示成功消息
      alert("提交成功！");
      
      // 清空表单
      $("#form1 :input").val("");
      
      // 显示表单
      $("#form1 :input").show();
    }
  });
});

Dalam kod di atas, apabila pengguna mengklik butang hantar, elemen borang disembunyikan. Data borang kemudiannya diserahkan kepada pelayan menggunakan kaedah AJAX. Jika penyerahan berjaya, mesej kejayaan akan dipaparkan. Kemudian, gunakan kaedah .val() untuk mengosongkan kandungan semua kotak input dalam borang. Akhirnya, elemen bentuk dipaparkan semula.

Ringkasan

Artikel ini memperkenalkan cara menggunakan JQuery untuk mengosongkan input dan memudahkan input borang. Kaedah input jelas asas termasuk mengosongkan kandungan kotak input tunggal, mengosongkan kandungan berbilang kotak input, mengosongkan kandungan semua kotak input dalam borang dan mengosongkan semua kandungan dalam borang. Selain itu, kami juga memperkenalkan senario dan teknik untuk mengosongkan input yang biasa digunakan dalam pembangunan sebenar, seperti mengosongkan nilai lalai dalam borang dan operasi selepas mengosongkan borang. Gunakan petua ini untuk menjadikan input borang penjelasan lebih mudah dan lebih dipercayai.

Atas ialah kandungan terperinci input jelas jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!