如何使用 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中文網其他相關文章！
