집 > 기사 > 웹 프론트엔드 > JavaScript를 사용하여 양식 입력 프롬프트 기능을 구현하는 방법은 무엇입니까?

JavaScript를 사용하여 양식 입력 프롬프트 기능을 구현하는 방법은 무엇입니까?

WBOY원래의: 2023-10-18 10:27:231244검색

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

양식 입력 프롬프트는 사용자 경험을 개선하기 위해 사용자가 입력할 때 해당 제안이나 프롬프트를 제공할 수 있는 일반적인 웹 페이지 상호 작용 기능입니다. JavaScript는 양식 입력 프롬프트 기능을 쉽게 구현할 수 있는 강력한 스크립트 언어입니다. 이 기사에서는 JavaScript를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비
코드 작성을 시작하기 전에 텍스트 입력 상자와 프롬프트 상자가 포함된 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>

위 코드에서는 텍스트 입력 상자와 빈 프롬프트 상자가 포함된 "양식 입력 프롬프트 예제"라는 제목의 웹 페이지를 만듭니다. 또한 script.js 파일에 정의된 입력 상자의 onkeyup 이벤트에서 showSuggestions()라는 JavaScript 함수를 호출했습니다. 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 코드 작성

입력 상자 값 가져오기먼저 showSuggestions() 함수에서 입력 상자 값을 가져와야 합니다. getElementById 메소드를 사용하여 텍스트 입력 상자의 요소를 가져온 다음 value 속성을 사용하여 해당 값을 가져올 수 있습니다. 샘플 코드는 다음과 같습니다:

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

프롬프트 상자의 내용 설정
다음으로 입력 상자의 값을 결정하고 표시해야 합니다. 프롬프트 상자 중앙에 적절한 프롬프트 정보가 표시됩니다. 여기서는 제안 상자의 ID가 suggestions라고 가정합니다. 샘플 코드는 다음과 같습니다.

rrreee
위 코드에서는 if 문을 사용하여 입력 상자의 값을 결정합니다. 값이 비어 있으면 프롬프트 상자의 내용을 빈 문자열로 설정하고, 그렇지 않으면 프롬프트 상자의 내용을 입력 값이 있는 단락 태그로 설정합니다.

프롬프트 상자 표시 및 숨기기🎜마지막으로 프롬프트 상자 표시 및 숨기기를 설정해야 합니다. 사용자가 입력할 때 입력 상자의 값이 비어 있지 않으면 프롬프트 상자가 표시되고, 그렇지 않으면 프롬프트 상자가 숨겨집니다. 샘플 코드는 다음과 같습니다:

rrreee🎜위 코드에서는 style.display 속성을 사용하여 프롬프트 상자의 표시 상태를 설정합니다. 입력 상자의 값이 비어 있으면 숨김(none)으로 설정하고, 비어 있지 않으면 표시(block)로 설정합니다. 🎜🎜3. 전체 코드 및 효과 표시🎜다음은 전체 script.js 파일의 코드입니다. 🎜rrreee🎜위 코드를 통해 양식 입력 프롬프트 기능을 구현했습니다. 사용자가 입력 상자에 문자를 입력하면 프롬프트 상자에 사용자의 입력 값이 표시됩니다. 입력 상자가 비어 있으면 프롬프트 상자가 숨겨집니다. 🎜🎜요약🎜이 글에서는 JavaScript를 사용하여 양식 입력 프롬프트 기능을 구현하는 방법을 소개합니다. 입력 상자의 값을 가져오고 프롬프트 상자의 내용과 표시 상태를 설정하여 기본 양식 입력 프롬프트 기능을 구현합니다. 위의 코드와 아이디어를 사용하면 실제 요구에 따라 확장하고 최적화하여 더욱 강력하고 개인화된 양식 입력 프롬프트 기능을 얻을 수 있습니다. 🎜

위 내용은 JavaScript를 사용하여 양식 입력 프롬프트 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html if 字符串 JS 事件 display

성명：

이전 기사：JavaScript를 사용하여 이미지 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?다음 기사：JavaScript를 사용하여 이미지 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?