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>
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: 在这里编写后续的代码 }
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>"; } }
在上面的代码中,我们使用 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"; } }
在上面的代码中,我们使用 style.display
属性来设置提示框的显示状态。如果输入框的值为空,我们将其设置为隐藏(none
);如果不为空,我们将其设置为显示(block
)。
三、完整代码与效果展示
下面是完整的 script.js
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"; } }
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 :
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. 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!