Comment utiliser JavaScript pour implémenter la fonction d'invite de saisie de formulaire ?-js tutoriel-php.cn

Comment utiliser JavaScript pour implémenter la fonction d'invite de saisie de formulaire ?

WBOY

Libérer： 2023-10-18 10:27:23

original

1245 Les gens l'ont consulté

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

Comment utiliser JavaScript pour implémenter la fonction d'invite de saisie de formulaire ?

Les invites de saisie de formulaire sont une fonction d'interaction courante sur les pages Web qui peut donner des suggestions ou des invites correspondantes lorsque les utilisateurs saisissent pour améliorer l'expérience utilisateur. JavaScript est un langage de script puissant qui peut facilement implémenter des fonctions d'invite de saisie de formulaire. Cet article expliquera comment utiliser JavaScript pour réaliser cette fonction et donnera des exemples de code spécifiques.

1. Préparation
Avant de commencer à écrire du code, nous devons créer une page HTML contenant une zone de saisie de texte et une zone d'invite. L'exemple de code est le suivant :

<!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>

Copier après la connexion

Dans le code ci-dessus, nous créons une page Web intitulée "Exemple d'invite de saisie de formulaire", qui contient une zone de saisie de texte et une zone d'invite vide. Nous avons également appelé une fonction JavaScript nommée showSuggestions() dans l'événement onkeyup de la zone de saisie, qui est définie dans le fichier script.js. onkeyup 事件中调用了名为 showSuggestions() 的 JavaScript 函数，在 script.js 文件中定义该函数。

二、编写 JavaScript 代码

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

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

Copier après la connexion

设置提示框内容
接下来，我们需要判断输入框的值，并将合适的提示信息显示在提示框中。这里我们假设提示框的 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>";
  }
}

Copier après la connexion

在上面的代码中，我们使用 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";
  }
}

Copier après la connexion

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

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

2. Écrivez du code JavaScript

Obtenez la valeur de la zone de saisie
Tout d'abord, nous devons obtenir la valeur de la zone de saisie dans la fonction showSuggestions(). Nous pouvons utiliser la méthode getElementById pour obtenir l'élément de la zone de saisie de texte, puis utiliser l'attribut value pour obtenir sa valeur. L'exemple de code est le suivant :

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";
  }
}

Copier après la connexion

Définir le contenu de la boîte d'invite
Ensuite, nous devons déterminer la valeur de la zone de saisie et afficher le informations d'invite appropriées au milieu de la boîte d'invite. Ici, nous supposons que l'ID de la boîte à suggestions est suggestions. L'exemple de code est le suivant :

rrreee
Dans le code ci-dessus, nous utilisons l'instruction if pour déterminer la valeur de la zone de saisie. Si la valeur est vide, définissez le contenu de la zone d'invite sur une chaîne vide ; sinon, définissez le contenu de la zone d'invite sur une balise de paragraphe avec la valeur d'entrée.

Afficher et masquer la boîte d'invite🎜Enfin, nous devons définir l'affichage et le masquage de la boîte d'invite. Lorsque l'utilisateur entre, si la valeur de la zone de saisie n'est pas vide, la boîte d'invite s'affiche sinon, la boîte d'invite est masquée. L'exemple de code est le suivant :

rrreee🎜Dans le code ci-dessus, nous utilisons l'attribut style.display pour définir l'état d'affichage de la boîte d'invite. Si la valeur de la zone de saisie est vide, nous la définissons pour qu'elle soit masquée (none) ; si elle n'est pas vide, nous la définissons pour être affichée (block). 🎜🎜3. Code complet et affichage des effets🎜Ce qui suit est le code du fichier complet script.js : 🎜rrreee🎜Grâce au code ci-dessus, nous avons implémenté la fonction d'invite de saisie de formulaire. Lorsque l'utilisateur saisit des caractères dans la zone de saisie, la zone d'invite affichera la valeur saisie par l'utilisateur. Lorsque la zone de saisie est vide, la zone d'invite sera masquée. 🎜🎜Résumé🎜Cet article explique comment utiliser JavaScript pour implémenter la fonction d'invite de saisie de formulaire. En obtenant la valeur de la zone de saisie et en définissant le contenu et l’état d’affichage de la zone d’invite, nous implémentons une fonction d’invite de saisie de formulaire de base. En utilisant le code et les idées ci-dessus, vous pouvez développer et optimiser en fonction des besoins réels pour obtenir une fonction d'invite de saisie de formulaire plus puissante et personnalisée. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!