Home > Article > Web Front-end > How to use JavaScript to implement form input prompt function?

How to use JavaScript to implement form input prompt function?

WBOYOriginal: 2023-10-18 10:27:231228browse

如何使用 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>

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: 在这里编写后续的代码
}

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

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

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

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!

JavaScript html if 字符串 JS 事件 display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JavaScript to implement drag-and-drop sorting of images?Next article：How to use JavaScript to implement drag-and-drop sorting of images?

See more

How to use JavaScript to implement form input prompt function?

Related articles