요즘 JS공부를 하면서 만들어본 스핀박스!
아래와 같은 조건아래 스핀박스를 만들어봤습니다.
[1] 스핀박스의 텍스트 상자에는 기본적으로 200 이 들어가게 해주세요.<br>
[2] ▲ 버튼을 누르면(mousedown) 숫자는 1이 증가하고, ▼ 버튼을 누르면 숫자는 1이 감소합니다.<br>
[3] 숫자의 증감은 100~300 사이의 범위에서만 바뀌도록 합니다.<br>
[4] 텍스트 상자에는 사용자가 숫자를 직접 입력 할 수 있으며 포커스 아웃(blur)시에 숫자 외의 글자는 모두 지워지게 해주세요. (만약ab12c3 라고 입력했다면 123 만 남습니다)<br>
[5] 텍스트 상자에 사용자가 직접 입력한 숫자가 100~300 범위를 벗어나면 포커스 아웃(blur)시에 100 미만 일때는 100 으로, 300 초과 일 때는 300 으로 설정되게 해주세요.<br>
[6] ▲ 버튼 또는 ▼ 버튼를 누르고 있으면 처음 누르기 시작한지 0.5초 후부터 0.1초마다 1 씩 증감하도록 해주세요.<br>
만들면서 힘들었던건 4, 6 번 조건!
입력받은 값에서 어떻게 숫자만 뽑아야할지..
그리고 버튼을 누르고 있다는 이벤트는 어떻게 확인할 수 있는지에 대한 고민을 많이 했었던 것 같은데요,
아마 다른 분들도 위의 두가지 부분이 가장 고민거리가 아닐까 예상해 봅니다.
충분히 고민해 보신 후 코드를 확인해보세요.
코드는.. 지저분하니깐 참고만..ㅎㅎ
- html -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrap">
<input type="text" value="200" id="_ipbx">
<button type="button" id="_up">+</button>
<button type="button" id="_dw">-</button>
</div>
- js -
$(document).ready(function(){
var timer; // setIntetval
var s_timer; // setTimeout
// + 버튼 클릭시 input의 value 값 감소
$('#_up').on('mousedown', function(event){
cal('_ipbx',1); // input의 value가 300보다 작으면 1증가.
s_timer = setTimeout(function() { // 0.5초 이후 실행
timer = setInterval(function() { // 0.1초마다 cal()함수 반복
cal('_ipbx',1);
},100);
},500);
});
// - 버튼 클릭시 input의 value 값 감소
$('#_dw').on('mousedown', function(event){
cal('_ipbx',2); // input의 value가 100보다 크면 1감소.
s_timer = setTimeout(function() { // 0.5초 이후 실행
timer = setInterval(function() { // 0.1초마다 cal()함수 반복
cal('_ipbx',2);
},100);
},500);
});
// 마우스를 떼면 타이머 관련 함수들 클리어
$(document).on('mouseup', function(event){
clearInterval(timer);
clearTimeout(s_timer);
});
// input에서 blur시 이벤트
$("#_ipbx").blur(function(){
var inp_txt = this.value; // input의 value값을 inp_txt에 저장
var inp_txt_Arr = inp_txt.split(''); // inp_txt의 값(문자열)을 배열로 바꿈
var ch_inp_txt=''; // 숫자만 추출후 저장될 변수
for(var i in inp_txt_Arr) { // 입력값만큼(배열크기) for문 반복
if(isNumber(inp_txt_Arr[i])) { // 배열의 값이 숫자이면
ch_inp_txt = ch_inp_txt.concat(inp_txt_Arr[i]); // ch_inp_txt에 숫자를 추가
}
}
this.value=ch_inp_txt; // 숫자로만 새로 생성된 ch_inp_txt를 value에 저장
if(this.value >= 300) { // value가 300이상이면 300으로 수정
this.value = 300;
}
else if(this.value <= 100){ // value가 100이하이면 100으로 수정
this.value = 100;
}
});
// input의 value값을 더하거나 빼는 함수
function cal(n_id, n_math) { // 첫번째 인자 ID, 두번쨰 인자 덧셈or뺄셈
switch(n_math) {
case 1 : // 덧셈
if(document.getElementById('_ipbx').value < 300) {
document.getElementById('_ipbx').value++;
}
break;
case 2 : // 뺄셈
if(document.getElementById('_ipbx').value > 100) {
document.getElementById('_ipbx').value--;
}
break;
default : break;
}
return false;
}
function isNumber(ch) { // 숫자유무 판단 함수
var numUnicode = ch.charCodeAt(0); // ch의 문자코드를 아스키코드로 반환
if ( 48 <= numUnicode && numUnicode <= 57 ) return true; // 변환된 아스키코드가 숫자가 맞으면 true, 숫자의 범위 48~57
return false;
}
});
See the Pen 스핀박스 만들기 by niizguy (@niizguy) on CodePen.