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 :
表单输入提示示例 表单输入提示示例
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éeshowSuggestions()
dans l'événementonkeyup
de la zone de saisie, qui est définie dans le fichierscript.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 = "输入:" + inputValue + "
"; } }
在上面的代码中,我们使用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 = "输入:" + inputValue + "
"; suggestions.style.display = "block"; } }
在上面的代码中,我们使用style.display
属性来设置提示框的显示状态。如果输入框的值为空,我们将其设置为隐藏(none
);如果不为空,我们将其设置为显示(block
)。
三、完整代码与效果展示
下面是完整的script.js
showSuggestions()
. Nous pouvons utiliser la méthodegetElementById
pour obtenir l'élément de la zone de saisie de texte, puis utiliser l'attributvalue
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 = "输入:" + inputValue + "
"; 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 estsuggestions
. 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 effetsCe qui suit est le code du fichier complet
script.js
: rrreeeGrâ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!