CODING FACTORY
Home  >  jQuery  >  jQuery Tutorial  >  jQuery / Tutorial / input 값 변화 감지하는 방법

jQuery / Tutorial / input 값 변화 감지하는 방법

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있습니다.

input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아봅니다.

input type="number"

  • 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보겠습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <p>A <input type="number" id="a"></p>
    <p>B <input type="number" id="b"></p>
    <p>A * C = <span id="ab"></span></p>
  </body>
</html>

change()로 감지하기

  • change()는 값을 입력하고 해당 폼을 벗어났을 때 변화를 감지합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#a, #b' ).change( function() {
          var a = $( '#a' ).val();
          var b = $( '#b' ).val();
          var ab = a * b;
          $( '#ab' ).text( ab );
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <p>A <input type="number" id="a"></p>
    <p>B <input type="number" id="b"></p>
    <p>A * C = <span id="ab"></span></p>
  </body>
</html>
  • 2를 입력하는 순간에는 아무 일이 없지만...

  • 폼을 벗어나면 2와 0의 곱 0을 출력합니다.

  • 마찬가지로, 두 번째 폼에 3을 입력하는 순간에는 아무 일이 없지만...

  • 폼을 벗어나면 2와 3의 곱 6을 출력합니다.

keyup()으로 감지하기

  • change() 대신 keyup()을 사용하면 입력하는 순간 변화를 감지합니다.
<script>
  $( document ).ready( function() {
    $( '#a, #b' ).keyup( function() {
      var a = $( '#a' ).val();
      var b = $( '#b' ).val();
      var ab = a * b;
      $( '#ab' ).text( ab );
    } );
  } );
</script>

on()

  • on()을 사용하여 여러 이벤트에 대해서 같은 작업을 할 수 있습니다. 다음은 폼을 선택했을 때도 계산 결과를 출력합니다.
<script>
  $( document ).ready( function() {
    $( '#a, #b' ).on( 'focus keyup', function() {
      var a = $( '#a' ).val();
      var b = $( '#b' ).val();
      var ab = a * b;
      $( '#ab' ).text( ab );
    } );
  } );
</script>

input type="checkbox"

  • 체크박스에 체크하면 Checked를 출력하고, 체크를 지우면 아무 것도 표시하지 않습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#a' ).change( function() {
          if ( $( '#a' ).is( ':checked' ) ) {
            $( '#b' ).text( 'Checked' );
          } else {
            $( '#b' ).text( '' );
          }
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <p>A <input type="checkbox" id="a"></p>
    <p id="b"></p>
  </body>
</html>

  • on()을 사용해도 됩니다.
<script>
  $( document ).ready( function() {
    $( '#a' ).on( 'change', function() {
      if ( $( '#a' ).is( ':checked' ) ) {
        $( '#b' ).text( 'Checked' );
      } else {
        $( '#b' ).text( '' );
      }
    } );
  } );
</script>

input type="radio"

  • 라디오 버튼을 클릭하면, 그 버튼에 해당하는 값이 출력됩니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'input[name="fruit"]' ).change( function() {
          $( '#a' ).text( $( this ).val() );
        } );
      } );
    </script>
    <style>
      * {
        font-family: Consolas;
      }
    </style>
  </head>
  <body>
    <p><input type="radio" name="fruit" value="Apple"> Apple</p>
    <p><input type="radio" name="fruit" value="Banana"> Banana</p>
    <p id="a"></p>
  </body>
</html>

  • on()을 사용해도 됩니다.
<script>
  $( document ).ready( function() {
    $( 'input[name="fruit"]' ).on( 'change', function() {
      $( '#a' ).text( $( this ).val() );
    } );
  } );
</script>
같은 카테고리의 다른 글
jQuery / Tutorial / 천 단위 쉼표 만드는 방법

jQuery / Tutorial / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).text( ...

jQuery / Tutorial / input 값 변화 감지하는 방법

jQuery / Tutorial / input 값 변화 감지하는 방법

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있습니다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아봅니다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...