[javascript] 입력 폼에서 동일한 값 입력 제한하기

11 Dec 2023

javascript

입력 폼에서 사용자가 동일한 값을 여러 번 입력하는 것을 방지하려면 JavaScript를 사용하여 입력을 제어할 수 있습니다. 이를 위해서는 입력 필드의 현재 값과 이전 값들을 비교하는 방법이 필요합니다. 아래에는 동일한 값 입력을 제한하는 예제 코드를 제공하겠습니다.

HTML 입력 폼 만들기

먼저, 다음과 같이 간단한 입력 폼을 만듭니다.

<form>
  <label for="inputField">값 입력:</label>
  <input type="text" id="inputField">
  <button type="submit">제출</button>
</form>

JavaScript를 사용하여 값 입력 제한하기

다음으로, JavaScript를 사용하여 입력을 제어하는 방법을 살펴봅시다.

let previousValue = "";

document.getElementById("inputField").addEventListener("input", function(event) {
  const currentValue = event.target.value;
  if (currentValue === previousValue) {
    alert("동일한 값은 입력할 수 없습니다.");
    event.target.value = "";
  }
  previousValue = currentValue;
});

위의 코드는 입력 필드의 값이 변경될 때마다 현재 값과 이전 값 사이에 비교를 수행합니다. 만약 두 값이 동일하다면, 경고 메시지를 표시하고 입력 필드를 비웁니다.

이제 이 코드를 사용하여 입력 폼에서 동일한 값 입력을 제한할 수 있습니다!

결론

이 문제를 해결하기 위해 JavaScript를 사용하여 입력을 제어하는 방법을 살펴보았습니다. 이를 통해 사용자가 동일한 값을 여러 번 입력하는 것을 방지할 수 있습니다.

참고 자료: