자바스크립트 input 자동합계 change keyup 동시사용이 가능한가요?
본문
개노미님의 도움으로 input 자동합계식을 사용하고있는데요
입력이벤트에서 change로 하니 input창 입력 후 다른곳으로 이동하지 않으면 합계가 바뀌지 않는 문제가 발생하였습니다.
물론 keyup으로 해보려했으나 이렇게되면 input 값의 기본 number를 쓰고있어 마우스를 클릭하여 값을바꾸면 이 또한 자동계산되지 않네요
구글링으로 찾아보니
const searchInput = document.querySelector(".search");
const suggestions = document.querySelector(".suggestions");
searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);
위와같이 하면된다는데 어디에 적용해야하는지 모르겠습니다.
출처 : https://devlibrary00108.tistory.com/655
늦은시간까지 어떻게든 해결해보려했지만 안되네요... 그럼 부탁드립니다. (__);
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$('.sum_11').change(function(evt) {
var sum11 = 0;
$('.sum_11').each(function(){
sum11 += +$(this).val() ;
});
$('input[name=wr_27]').val(Math.round(sum11)) ;
});
});
</script>
<table border=0 class="table table-bordered text-center">
<thead>
<tr class="table-secondary">
<th scope="col">항목</th>
<th scope="col">1항-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1번</td>
<td><input type="number" name="wr_51" id="wr_51" class="sum_11" min="0" max="5" tabindex="51"></td>
</tr>
<tr>
<td>2번</td>
<td><input type="number" name="wr_52" id="wr_52" class="sum_11" min="0" max="5" tabindex="52"></td>
</tr>
<tr>
<td>3번</td>
<td><input type="number" name="wr_53" id="wr_53" class="sum_11" min="0" max="5" tabindex="53"></td>
</tr>
<tr>
<td>4번</td>
<td><input type="number" name="wr_54" id="wr_54" class="sum_11" min="0" max="5" tabindex="54"></td>
</tr>
<tr>
<td>5번</td>
<td><input type="number" name="wr_55" id="wr_55" class="sum_11" min="0" max="5" tabindex="55"></td>
</tr>
<tr>
<td>합계</td>
<td><input type="number" name="wr_27" id="wr_27" class="sum_27" readonly></td>
</tr>
</tbody>
</table>
답변 2
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$('.sum_11').on('change keyup', function(evt) { // 이 부분이 수정됨
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_27]').val(Math.round(sum11));
});
});
</script>
이렇게 한번 해보세요.
잘되네요... 답변 정말 감사합니다.
아래와 같이 변경해 보세요..
테스트는 해보지 않았지만 아마 해결 될 것입니다.
$('.sum_11').on('keyup keypress',function(){
.........
});
답변감사드립니다.
답변을 작성하시기 전에 로그인 해주세요.