목차
change() 예제 - 입력 후 Enter 키 누르면 경고창 띄우기 change() 정의 change() 구문 change() 예제 - change 이벤트 촉발시키기 change() 예제 - change 이벤트 발생 시, 함수 적용 change() 예제 - <select> 실렉트 이미지변경 change() 예제 - 실렉트 변경해 글자 크기 변경 change() 예제 - 멀티 실렉트 변경해 글자 내용 변경 change 이벤트 - 곱셈 자동계산 후 입력 ★
change() 예제 - 입력 후 Enter 키 누르면 경고창 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("Homzzang.com 놀러오세요.");
});
});
</script>
<input type="text" placeholder='아무거나 입력 후 Enter'>
결과보기
※ <input>, <textarea> ,<select> 요소에서 사용.
change() 정의
change 이벤트는 입력창에 입력값을 입력 후 Enter 키 누르면 발생.
※ change() 메서드는 아래 2가지 동작 가능.
① change 이벤트 촉발.
② change 이벤트가 발생할 때 실행할 함수 부착.
<input>, <textarea>, <select> 요소에서만 작동 .
2. cf.
<select> 메뉴 경우: <option>이 선택될 시 change 이벤트 발생.
<input>, <textarea> 경우: 내용 변경된 후 입력필드가 focus 잃으면 change 이벤트 발생.
3. 예제 더 보기
change() 구문
change 이벤트 촉발
$(selector ).change()
change 이벤트에 함수 부착
$(selector ).change(function )
[매개변수]
function
선택. 선택요소에 대해 체인지 이벤트 발생할 때 실행할 함수 지정.
change() 예제 - change 이벤트 촉발시키기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").change();
});
});
</script>
<button>클릭</button>
<p>도메인: <input value="Homzzang.com" onchange="alert(this.value)" type="text"></p>
결과보기
※ 요소 값이 아직 안 변했지만, 버튼 클릭하면 변동이벤트 줄 수 있음.
change() 예제 - change 이벤트 발생 시, 함수 적용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hz").change(function(){
$(this).css("background-color", "yellow");
});
});
</script>
도메인: <input class="hz" type="text">
코딩언어:
<select class="hz" name="code">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JS">JS</option>
</select>
결과보기
change() 예제 - <select> 실렉트 이미지변경
<script src="http://code.jquery.com/jquery-latest.js"></script>
#container{
position:relative;
display:inline-block;
height: 100px;
width:100px;
border:solid 1px grey;
overflow:hidden;
}
.pic{
position: absolute;
left: 0px;
top: 0px;
cursor: pointer;
display:none;
}
</style>
<select id="show">
<option>선택</option>
<option>협박</option>
<option>키스</option>
</select><br>
<div id="container">
<img class="pic" id="협박" src="https://i.imgur.com/PQNhCln.gif">
<img class="pic" id="키스" src="https://i.imgur.com/YrkG5xB.gif">
</div>
$(document).ready(function() {
$("#show").change( function() {
$("#show option:selected").each(function() {
$('.pic').hide().filter('#'+$(this).text()).fadeIn();
}); //each 닫기
}); //change 닫기
}); // ready 닫기
결과보기
change() 예제 - 실렉트 변경해 글자 크기 변경
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="hz">홈짱닷컴 Homzzang.com</div>
<select class="fontsize">
<option value="">Font-size</option>
<?php for($i=12; $i<=30; $i++){ ?>
<option value="<?php echo $i?>"><?php echo $i?>px</option>
<?php } ?>
</select>
<script>
$(document).ready(function(){
$(".fontsize").change(function(){
var fs = $(this).val();
$(".hz").css("font-size", fs + "px");
});
});
</script>
change() 예제 - 멀티 실렉트 변경해 글자 내용 변경
<script src="https://code.jquery.com/jquery-latest.js"></script>
<select name="hz" id="hz" multiple="multiple">
<option selected="selected">HTML</option>
<option selected="selected">CSS</option>
<option>JS</option>
<option>jQuery</option>
<option>PHP</option>
<option>SQL</option>
</select>
<div id="demo"></div>
<script>
$( "#hz" )
.change(function () {
var str = "";
$( "#hz option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#demo" ).text( str );
})
.change();
</script>
결과보기
PS. Shift/CTrl 키 등과 함께 클릭 시, 여러 개 선택 가능.
change 이벤트 - 곱셈 자동계산 후 입력 ★
$('#wr_1, #wr_2').on('change', function() {
$('#wr_3').val( Number($('#wr_1').val()) * Number($('#wr_2').val()) )
});
슈와이 님 (170915) https://sir.kr/qa/204273
