JavaScript를 사용하여 입력 버튼 활성화 / 비활성화

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript를 사용하여 입력 버튼 활성화 / 비활성화
Harshit Jindal 2023년1월30일 2021년3월24일
JavaScript JavaScript DOM
  1. JavaScript를 사용하여 입력 버튼 활성화 / 비활성화
  2. jQuery를 사용하여 입력 버튼 활성화 / 비활성화
JavaScript를 사용하여 입력 버튼 활성화 / 비활성화

이 튜토리얼에서는 JavaScript / JQuery를 사용하여 HTML 입력 버튼을 활성화 / 비활성화하는 방법을 설명합니다.

양식 제출 전후와 같이 HTML 버튼을 활성화 / 비활성화하려는 상황이 자주 발생합니다. 이를 수행하는 가장 좋은 방법은 JavaScript DOM 조작을 사용하여 버튼을 선택하고비활성화 됨상태를true/false로 변경하여on/off상태를 토글하는 것입니다. 아래에서는 버튼을 비활성화 / 활성화하는 두 가지 방법, 하나는 JavaScript를 사용하고 다른 하나는 JQuery를 사용합니다.

JavaScript를 사용하여 입력 버튼 활성화 / 비활성화

아래는 상자에 텍스트를 입력 할 때 활성화되고 그렇지 않으면 비활성화되는 버튼의 데모입니다.

HTML 코드

<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>

JavaScript 코드

let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true; 
  } else {
    button.disabled = false;
  }
}

비활성화 버튼 javascript.png

여기서는 먼저 입력과 버튼에 대한 참조를 두 개의 변수에 저장 한 다음 버튼의 기본 상태를 비활성화로 설정합니다. 이벤트 리스너를 추가하여 텍스트 상자 안에 입력 활동이 있는지 확인한 다음stateHandle()함수를 사용하여 제출 버튼을 그에 따라 비활성화 / 활성화합니다.

jQuery를 사용하여 입력 버튼 활성화 / 비활성화

<html>
<head>
    <title>Enable/Disable a HTML button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
      Name: <input type="text" id="reco" />
    <input type="submit" id="submit" disabled="disabled" />
</body>

<script>
    $(document).ready(function () {
        $('#reco').on('input change', function () {
            if ($(this).val() != '') {
                $('#submit').prop('disabled', false);
            }
            else {
                $('#submit').prop('disabled', true);
            }
        });
    });
</script>
</html>

문서가로드되면 사용할 수 있도록ready()함수를 사용합니다. 그런 다음.on()메소드가 이벤트 핸들러를 입력 필드에 연결합니다. change이벤트는 입력 필드의 변경 사항을 확인하고 그에 따라 기능을 실행합니다. .prop()메소드는 버튼의 상태를 변경합니다.

관련 문장 - JavaScript DOM