Heim >Web-Frontend >js-Tutorial >Wie verwende ich JavaScript, um die Funktion zur Formulareingabeaufforderung zu implementieren?

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

WBOYOriginal: 2023-10-18 10:27:231304Durchsuche

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

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:

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

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 namens showSuggestions() im onkeyup-Ereignis des Eingabefelds aufgerufen, das in der Datei script.js definiert ist. onkeyup 事件中调用了名为 showSuggestions() 的 JavaScript 函数，在 script.js 文件中定义该函数。

二、编写 JavaScript 代码

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

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

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

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

2. JavaScript-Code schreiben

Den Wert des Eingabefelds abrufenZuerst müssen wir den Wert des Eingabefelds in der Funktion showSuggestions() abrufen. Wir können die Methode getElementById verwenden, um das Element des Texteingabefelds abzurufen, und dann das Attribut value verwenden, 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 = "<p>输入：" + inputValue + "</p>";
    suggestions.style.display = "block";
  }
}

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 Vorschlagsbox suggestions ist. Der Beispielcode lautet wie folgt:

rrreee
Im obigen Code verwenden wir die if-Anweisung, um den Wert des Eingabefelds zu bestimmen. Wenn der Wert leer ist, legen Sie den Inhalt des Eingabeaufforderungsfelds auf eine leere Zeichenfolge fest. Andernfalls legen Sie den Inhalt des Eingabeaufforderungsfelds auf ein Absatz-Tag mit dem Eingabewert fest.

Eingabeaufforderungsfeld anzeigen und ausblenden🎜Zuletzt 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:

rrreee🎜Im obigen Code verwenden wir das Attribut style.display, um den Anzeigestatus des Eingabeaufforderungsfelds festzulegen. Wenn der Wert des Eingabefelds leer ist, setzen wir ihn auf „versteckt“ (none); wenn er nicht leer ist, setzen wir ihn auf „show“ (block). 🎜🎜3. Vollständiger Code und Effektanzeige🎜Das Folgende ist der Code der vollständigen script.js-Datei: 🎜rrreee🎜Durch den obigen Code haben wir die Funktion von Formulareingabeaufforderungen implementiert. Wenn der Benutzer Zeichen in das Eingabefeld eingibt, wird im Eingabefeld der Eingabewert des Benutzers angezeigt. Wenn das Eingabefeld leer ist, wird das Eingabefeld ausgeblendet. 🎜🎜Zusammenfassung🎜In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zur Formulareingabeaufforderung implementieren. Indem wir den Wert des Eingabefelds abrufen und den Inhalt und Anzeigestatus des Eingabeaufforderungsfelds festlegen, implementieren wir eine grundlegende Formulareingabeaufforderungsfunktion. Mithilfe des oben genannten Codes und der oben genannten Ideen können Sie ihn entsprechend den tatsächlichen Anforderungen erweitern und optimieren, um eine leistungsfähigere und personalisiertere Eingabeaufforderungsfunktion für Formulare zu erhalten. 🎜

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!

JavaScript html if 字符串 JS 事件 display

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verwende ich JavaScript, um die Drag-and-Drop-Sortierung von Bildern zu implementieren?Nächster Artikel：Wie verwende ich JavaScript, um die Drag-and-Drop-Sortierung von Bildern zu implementieren?

In Verbindung stehende Artikel

Mehr sehen