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>
Related Posts
jQuery / input 값 변화 감지하기 / change, keyup
input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드
.offset() .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다. 문법 1 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var jb = $( 'h1' ).offset(); 는 h1 요소의 좌표를 변수 jb에 저장합니다. 문법 2 .offset( coordinates ) 선택한 요소를 특정 위치로 이동시킵니다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 ...
jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다. 문법 문법은 다음과 같다. .after( content ) 예를 들어 다음은 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).after( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ...
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 / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자
:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...
jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드
.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동
jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 h 태그가 많은 HTML 문서를 만듭니다. 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 넣습니다. jquery.toc.js의 경로는 적절히 수정하세요. <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery.toc.js"></script> 다음 ...
jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드
.scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다. 문법 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 수직 위치를 가져옵니다. 문법 2 .scrollTop( value ) 스크롤바 수직 위치를 정합니다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다. 예제 1 버튼을 클릭하면 div 요소의 스크롤바 위치를 ...
jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드
.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...
.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...