jQuery / input 값 변화 감지하기 / change, keyup

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 / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 문법 1 - 속성의 값 가져오기 선택한 요소의 속성의 값을 가져온다. .attr( attributeName )  예를 들어 아래는 div 요소의 class 속성의 값을 가져온다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 선택한 요소에 속성을 추가한다. .attr( attributeName, value )  예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / 동적 셀렉트(select) 만드는 방법

jQuery / 동적 셀렉트(select) 만드는 방법

앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것. 아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다. onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다. 변수 a에는 A를 선택했을 ...

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드

.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다. 문법 1 - 속성의 값 가져오기 propertyName의 속성값을 가져온다. .css( propertyName ) 예를 들어 아래는 h1 요소의 스타일 중 color 속성의 값을 가져온다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 style 속성을 추가한다. .css( propertyName, value ) 예를 들어 아래는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 ...

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다. width - padding 안쪽 크기 innerWidth - border 안쪽 크기 outerWidth - border 포함 크기 다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .parent() - 부모 요소 선택하는 메서드

jQuery / Method / .parent() - 부모 요소 선택하는 메서드

.parent() .parent()는 어떤 요소의 부모 요소를 선택합니다. 문법 .parents( ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 은 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 은 p의 부모 요소가 div일 때만 녹색으로 만듭니다. 예제 ef를 클래스 값으로 갖는 ...

jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...