Cara menggunakan javascript untuk muncul kotak input

Dalam pembangunan web, kotak input pop timbul adalah salah satu keperluan yang sangat biasa. Dalam JavaScript, kotak input pop timbul boleh dicapai dengan menggunakan kaedah gesaan terbina dalam objek tetingkap. Kaedah

prompt() ialah salah satu kaedah terbina dalam objek tetingkap JavaScript, yang digunakan untuk muncul kotak dialog dengan kotak input dalam penyemak imbas. Kaedah ini boleh menerima dua parameter, parameter pertama adalah rentetan segera, digunakan untuk meminta pengguna memasukkan maklumat, parameter kedua adalah nilai lalai pilihan, digunakan untuk memaparkan nilai lalai dalam kotak input.

Berikut ialah contoh asas menggunakan kaedah prompt() untuk muncul kotak input:

var input = prompt("请输入姓名", "张三");

Kod di atas akan muncul kotak dialog dengan kotak input pada halaman, di mana nilai lalai kotak input Nilai ialah "Zhang San", dan rentetan gesaan ialah "Sila masukkan nama anda".

Apabila pengguna memasukkan maklumat dalam kotak input dan mengklik butang "OK" dalam kotak dialog, kotak pop timbul akan ditutup dan nilai yang dimasukkan oleh pengguna akan digunakan sebagai nilai pulangan bagi kaedah. Jika pengguna mengklik butang "Batal" dalam kotak dialog, kaedah itu mengembalikan nol.

if (input == null) {
  alert("你取消了输入");
} else {
  alert("你输入的是：" + input);
}

Selepas kotak input ditutup, kod di atas akan muncul kotak gesaan yang berbeza berdasarkan operasi pengguna.

Perlu diambil perhatian bahawa kaedah prompt() hanya boleh digunakan untuk input pengguna yang mudah Dalam pembangunan web sebenar, kami biasanya perlu menggunakan kotak input yang lebih fleksibel untuk menyokong lebih banyak keperluan perniagaan. Pada masa ini, kita perlu menggunakan beberapa perpustakaan atau rangka kerja JavaScript untuk melaksanakan fungsi ini.

Contohnya, menggunakan komponen dialog dalam perpustakaan kelas jQuery, kami boleh memunculkan pelbagai jenis kotak dialog dengan sangat mudah, dan juga menyokong kulit tersuai dan kesan animasi.

Berikut ialah contoh kod untuk melaksanakan kotak input berdasarkan komponen dialog jQuery:

$("#inputDialog").dialog({
  autoOpen: false,      // 是否自动弹出对话框
  resizable: false,     // 是否可缩放
  title: "请输入姓名",  // 标题
  modal: true,          // 是否模态对话框
  buttons: {            // 按钮
    确定: function() {
      var input = $("#inputText").val();
      $(this).dialog("close");
      alert("你输入的是：" + input);
    },
    取消: function() {
      $(this).dialog("close");
    }
  }
});

$("#showInputDialog").click(function() {
  $("#inputDialog").dialog("open");
});

Dalam kod di atas, kami mula-mula memilih elemen di mana kotak input terletak melalui kaedah pemilih jQuery dan dialog panggilan( ) untuk memulakan kotak dialog. Antaranya, parameter autoOpen menunjukkan sama ada kotak dialog akan muncul secara automatik, boleh diubah saiz menunjukkan sama ada kotak dialog boleh berskala, modal menunjukkan sama ada kotak dialog modal, dan butang menunjukkan butang dalam kotak dialog.

Seterusnya, kami menambah butang pada halaman dan mencetuskan pop timbul kotak dialog melalui acara klik.

Pada masa ini, apabila pengguna mengklik butang "OK" dalam kotak dialog, kita boleh mendapatkan nilai dalam kotak input melalui kaedah val() dan muncul kotak gesaan untuk memaparkan kandungan dimasukkan oleh pengguna.

Melalui kod di atas, kami boleh dengan mudah memaparkan kotak input Berbanding dengan kaedah prompt(), kaedah ini lebih fleksibel dan dapat memenuhi pelbagai keperluan perniagaan dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan javascript untuk muncul kotak input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!