Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi gesaan input borang?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi gesaan input borang?

WBOY

Lepaskan： 2023-10-18 10:27:23

asal

1287 orang telah melayarinya

如何使用 JavaScript 实现表单输入提示功能？

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi gesaan input borang?

Gesaan input borang ialah fungsi interaksi halaman web biasa yang boleh memberikan cadangan atau gesaan yang sepadan apabila pengguna memasukkan untuk meningkatkan pengalaman pengguna. JavaScript ialah bahasa skrip yang berkuasa yang boleh melaksanakan fungsi gesaan input borang dengan mudah. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai fungsi ini dan memberikan contoh kod khusus.

1. Persediaan
Sebelum kita mula menulis kod, kita perlu membuat halaman HTML, yang mengandungi kotak input teks dan kotak gesaan. Kod sampel adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>表单输入提示示例</title>
</head>
<body>
  <h1>表单输入提示示例</h1>
  
  <input type="text" id="input" onkeyup="showSuggestions()">
  
  <div id="suggestions"></div>
  
  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta halaman web bertajuk "Contoh Gesaan Input Borang", yang mengandungi kotak input teks dan kotak gesaan kosong. Kami juga memanggil fungsi JavaScript bernama showSuggestions() dalam acara onkeyup kotak input, yang ditakrifkan dalam fail script.js . onkeyup 事件中调用了名为 showSuggestions() 的 JavaScript 函数，在 script.js 文件中定义该函数。

二、编写 JavaScript 代码

获取输入框的值
首先，我们需要在 showSuggestions() 函数中获取输入框的值。我们可以使用 getElementById 方法获取文本输入框的元素，然后使用 value 属性获取其值。示例代码如下：

function showSuggestions() {
  var input = document.getElementById("input");
  var inputValue = input.value;
  
  // TODO: 在这里编写后续的代码
}

Salin selepas log masuk

设置提示框内容
接下来，我们需要判断输入框的值，并将合适的提示信息显示在提示框中。这里我们假设提示框的 ID 为 suggestions。示例代码如下：

function showSuggestions() {
  var input = document.getElementById("input");
  var inputValue = input.value;
  
  var suggestions = document.getElementById("suggestions");
  
  if (inputValue.length === 0) {
    suggestions.innerHTML = "";
  } else {
    suggestions.innerHTML = "<p>输入：" + inputValue + "</p>";
  }
}

Salin selepas log masuk

在上面的代码中，我们使用 if 语句判断了输入框的值。如果值为空，则将提示框内容设置为空字符串；否则，将提示框内容设置为一个带有输入值的段落标签。

显示和隐藏提示框
最后，我们需要设置提示框的显示和隐藏。在用户输入时，如果输入框的值不为空，则显示提示框；否则，隐藏提示框。示例代码如下：

function showSuggestions() {
  var input = document.getElementById("input");
  var inputValue = input.value;
  
  var suggestions = document.getElementById("suggestions");
  
  if (inputValue.length === 0) {
    suggestions.innerHTML = "";
    suggestions.style.display = "none";
  } else {
    suggestions.innerHTML = "<p>输入：" + inputValue + "</p>";
    suggestions.style.display = "block";
  }
}

Salin selepas log masuk

在上面的代码中，我们使用 style.display 属性来设置提示框的显示状态。如果输入框的值为空，我们将其设置为隐藏（none）；如果不为空，我们将其设置为显示（block）。

三、完整代码与效果展示
下面是完整的 script.js

2. Tulis kod JavaScript

Dapatkan nilai kotak input
Pertama, kita perlu mendapatkan nilai kotak input dalam fungsi showSuggestions(). Kita boleh menggunakan kaedah getElementById untuk mendapatkan elemen kotak input teks, dan kemudian menggunakan atribut value untuk mendapatkan nilainya. Kod sampel adalah seperti berikut:

function showSuggestions() {
  var input = document.getElementById("input");
  var inputValue = input.value;
  
  var suggestions = document.getElementById("suggestions");
  
  if (inputValue.length === 0) {
    suggestions.innerHTML = "";
    suggestions.style.display = "none";
  } else {
    suggestions.innerHTML = "<p>输入：" + inputValue + "</p>";
    suggestions.style.display = "block";
  }
}

Salin selepas log masuk

Tetapkan kandungan kotak gesaan
Seterusnya, kita perlu menentukan nilai kotak input dan memaparkan maklumat segera yang sesuai di tengah kotak gesaan. Di sini kami menganggap bahawa ID kotak cadangan ialah cadangan. Kod sampel adalah seperti berikut:

rrreee
Dalam kod di atas, kami menggunakan pernyataan if untuk menentukan nilai kotak input. Jika nilai kosong, tetapkan kandungan kotak gesaan kepada rentetan kosong jika tidak, tetapkan kandungan kotak gesaan kepada teg perenggan dengan nilai input.

Tunjukkan dan sembunyikan kotak gesaan🎜Akhir sekali, kita perlu menetapkan paparan dan penyembunyian kotak gesaan. Apabila pengguna memasukkan, jika nilai kotak input tidak kosong, kotak gesaan dipaparkan jika tidak, kotak gesaan disembunyikan. Kod sampel adalah seperti berikut:

rrreee🎜Dalam kod di atas, kami menggunakan atribut style.display untuk menetapkan keadaan paparan kotak gesaan. Jika nilai kotak input kosong, kami menetapkannya untuk disembunyikan (tiada); 🎜🎜3. Kod lengkap dan paparan kesan🎜Berikut ialah kod fail script.js lengkap: 🎜rrreee🎜Melalui kod di atas, kami telah melaksanakan fungsi gesaan input borang. Apabila pengguna memasukkan aksara dalam kotak input, kotak gesaan akan memaparkan nilai input pengguna Apabila kotak input kosong, kotak gesaan akan disembunyikan. 🎜🎜Ringkasan🎜Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi gesaan input borang. Dengan mendapatkan nilai kotak input dan menetapkan kandungan dan keadaan paparan kotak gesaan, kami melaksanakan fungsi gesaan input bentuk asas. Menggunakan kod dan idea di atas, anda boleh mengembangkan dan mengoptimumkan mengikut keperluan sebenar untuk mencapai fungsi gesaan input borang yang lebih berkuasa dan diperibadikan. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi gesaan input borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!