首頁 > 文章 > web前端 > 如何使用 JavaScript 實作表單輸入提示功能？

如何使用 JavaScript 實作表單輸入提示功能？

WBOY原創: 2023-10-18 10:27:231228瀏覽

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

表單輸入提示是一種常見的網頁互動功能，它能夠在使用者輸入時給予對應的建議或提示，提高使用者體驗。 JavaScript 是一門強大的腳本語言，可以很方便地實現表單輸入提示功能。本文將介紹如何使用 JavaScript 實作此功能，並給出具體的程式碼範例。

一、準備工作
在開始寫程式碼之前，我們需要先建立一個 HTML 頁面，其中包含一個文字輸入框和一個提示框。範例程式碼如下：

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

在上面的程式碼中，我們建立了一個標題為「表單輸入提示範例」的網頁，其中包含一個文字輸入框和一個空的提示框。我們也在輸入框的 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 檔案的程式碼：

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

透過以上程式碼，我們實作了表單輸入提示的功能。當使用者在輸入框中輸入字元時，提示框會顯示使用者的輸入值，輸入框為空時，提示框會隱藏起來。

總結
本文介紹如何使用 JavaScript 實作表單輸入提示功能。透過取得輸入框的值、設定提示框的內容和顯示狀態，我們實現了一個基本的表單輸入提示功能。使用上述的程式碼和思路，你可以根據實際需求進行擴充和最佳化，實現更強大、更個人化的表單輸入提示功能。

以上是如何使用 JavaScript 實作表單輸入提示功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html if 字符串 JS 事件 display

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用 JavaScript 實作圖片拖曳排序功能？下一篇：如何使用 JavaScript 實作圖片拖曳排序功能？

看更多