Wie verwende ich JavaScript, um die Funktion zur Formulareingabeaufforderung zu implementieren?

Formulareingabeaufforderungen sind eine gängige Interaktionsfunktion auf Webseiten, die bei Benutzereingaben entsprechende Vorschläge oder Eingabeaufforderungen geben kann, um die Benutzererfahrung zu verbessern. JavaScript ist eine leistungsstarke Skriptsprache, mit der sich Eingabeaufforderungsfunktionen für Formulareingaben problemlos implementieren lassen. In diesem Artikel wird erläutert, wie Sie diese Funktion mithilfe von JavaScript erreichen, und es werden spezifische Codebeispiele aufgeführt.

1. Vorbereitung
Bevor wir mit dem Schreiben von Code beginnen, müssen wir eine HTML-Seite erstellen, die ein Texteingabefeld und ein Eingabeaufforderungsfeld enthält. Der Beispielcode lautet wie folgt:

    
  
表单输入提示示例
  
   

Im obigen Code erstellen wir eine Webseite mit dem Titel „Beispiel für eine Formulareingabeaufforderung“, die ein Texteingabefeld und ein leeres Eingabeaufforderungsfeld enthält. Wir haben auch eine JavaScript-Funktion namensshowSuggestions()imonkeyup-Ereignis des Eingabefelds aufgerufen, das in der Dateiscript.jsdefiniert ist.onkeyup事件中调用了名为showSuggestions()的 JavaScript 函数，在script.js文件中定义该函数。

二、编写 JavaScript 代码

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

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

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

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

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

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

1. Den Wert des Eingabefelds abrufen
   Zuerst müssen wir den Wert des Eingabefelds in der FunktionshowSuggestions()abrufen. Wir können die MethodegetElementByIdverwenden, um das Element des Texteingabefelds abzurufen, und dann das Attributvalueverwenden, um seinen Wert abzurufen. Der Beispielcode lautet wie folgt:

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

2. Legen Sie den Inhalt des Eingabefelds fest

   Als nächstes müssen wir den Wert des Eingabefelds ermitteln und anzeigen Geben Sie in der Mitte des Eingabeaufforderungsfelds die entsprechenden Eingabeaufforderungsinformationen ein. Hier gehen wir davon aus, dass die ID der Vorschlagsboxsuggestionsist. Der Beispielcode lautet wie folgt:

3. Eingabeaufforderungsfeld anzeigen und ausblendenZuletzt müssen wir die Anzeige und das Ausblenden des Eingabeaufforderungsfelds festlegen. Wenn der Benutzer eine Eingabe macht und der Wert des Eingabefelds nicht leer ist, wird das Eingabeaufforderungsfeld angezeigt. Andernfalls wird das Eingabeaufforderungsfeld ausgeblendet. Der Beispielcode lautet wie folgt:

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um die Funktion zur Formulareingabeaufforderung zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!