How to use JavaScript to implement form input prompt function?-JS Tutorial-php.cn

How to use JavaScript to implement form input prompt function?

WBOY

Release： 2023-10-18 10:27:23

Original

1294 people have browsed it

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

How to use JavaScript to implement the form input prompt function?

Form input prompt is a common web page interactive function. It can give corresponding suggestions or prompts when the user inputs to improve the user experience. JavaScript is a powerful scripting language that can easily implement form input prompt functions. This article will introduce how to use JavaScript to achieve this function and give specific code examples.

1. Preparation
Before starting to write code, we need to create an HTML page, which contains a text input box and a prompt box. The sample code is as follows:

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

Copy after login

In the above code, we create a web page titled "Form Input Prompt Example", which contains a text input box and an empty prompt box. We also call a JavaScript function named showSuggestions() in the onkeyup event of the input box, defined in the script.js file.

2. Write JavaScript code

Get the value of the input box
First, we need to get the value of the input box in the showSuggestions() function. We can use the getElementById method to get the element of the text input box, and then use the value attribute to get its value. The sample code is as follows:

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

Copy after login

Set the content of the prompt box
Next, we need to determine the value of the input box and display the appropriate prompt information in the prompt box. Here we assume that the ID of the prompt box is suggestions. The sample code is as follows:

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

Copy after login

In the above code, we use the if statement to determine the value of the input box. If the value is empty, set the content of the prompt box to an empty string; otherwise, set the content of the prompt box to a paragraph tag with the input value.

Showing and hiding the prompt box
Finally, we need to set the display and hiding of the prompt box. When the user inputs, if the value of the input box is not empty, the prompt box is displayed; otherwise, the prompt box is hidden. The sample code is as follows:

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

Copy after login

In the above code, we use the style.display property to set the display state of the prompt box. If the value of the input box is empty, we set it to be hidden (none); if it is not empty, we set it to be displayed (block).

3. Complete code and effect display
The following is the code of the complete script.js file:

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

Copy after login

Through the above code, we implement the form input prompt function. When the user enters characters in the input box, the prompt box will display the user's input value. When the input box is empty, the prompt box will be hidden.

Summary
This article introduces how to use JavaScript to implement the form input prompt function. By getting the value of the input box and setting the content and display state of the prompt box, we implement a basic form input prompt function. Using the above code and ideas, you can expand and optimize according to actual needs to achieve a more powerful and personalized form input prompt function.

The above is the detailed content of How to use JavaScript to implement form input prompt function?. For more information, please follow other related articles on the PHP Chinese website!