[javascript] 숫자 입력 체크 및 업다운 버튼 with jquery

-99.75 ~ 99.75 라는 숫자를 입력할 수 있는 input창이 필요하여 작성

 

- 최대 99.75 최소 -99.75까지 입력 가능

- 수점은 0.25단위로 입력 가능하게 구성
- 숫자는 00.00 단위로 출력되도록 적용

- 필요시 up down 버튼 생성 가능

 

이벤트 부분에서 jquery만을 사용하다보니 헷갈린 부분이 조금 있었으며, 어쩔 수 없이 jquery를 사용하고 값을 가져오는 부분에도 사용했다.

 

기존에 작성했던 textarea에 최대값을 입력하는것과 같은 형식으로 작성하였고 정규식의 경우에는 다른 곳들을 좀 참조하면서 사용하였다.

 

특정 input에 클래스명을 주고 vacationFormat을 생성할때 클래스명을 주는 형식으로 사용하면 된다. 

 

세부 예시는 아래와 같다.

const test = new vacationFormat(".클래스명");
test.setInit();//키보드 이벤트 연결
test.createUpDownBtn();//버튼 생성 필요 시

 

코드

//발생일수 입력값 포멧체크용
function vacationFormat(target){
    //사용 값 세팅
    this.MAX = 99.75;
    this.MIN = -99.75;
    this.CHANGE = 0.25;

    //값 변동 대상
	this.$target = $(target);

	this.setInit();
}

vacationFormat.prototype.setInit = function(){	
	this.$target.keyup({self:this}, this.keyup);
	this.$target.keypress({self:this}, this.keypress);
	this.$target.change({self:this}, this.change);
}
vacationFormat.prototype.checkMinMax = function(val){

    const ori = val;

	//최대, 최소값 처리
	if(val < this.MIN){
		val = this.MIN;
	}
	else if(val > this.MAX){
		val = this.MAX;
	}

    if(ori != val){
        alert(this.MIN + " ~ " + this.MAX + " 사이의 숫자만 입력가능합니다");
    }

    return val;
}
vacationFormat.prototype.createUpDownBtn = function(){
    let appendStr = "";
    appendStr += "<div class='btns inlineb'>";
    appendStr += "  <button type='button' class='up btn-md bd-main'>up</button>";
    appendStr += "  <button type='button' class='down btn-md bd-main'>down</button>";
    appendStr += "</div>";
    this.$target.parent().append(appendStr);

    this.$target.siblings(".btns").find('.up').on('click', {self:this}, function(evt){
        const self = evt.data.self;
        
        self.$target.val(Number(self.$target.val())+self.CHANGE);
        self.$target.val(self.checkMinMax(self.$target.val()));
        self.$target.trigger('change');
    });

    this.$target.siblings(".btns").find('.down').on('click', {self:this}, function(evt){
        const self = evt.data.self;

        self.$target.val(Number(self.$target.val())-self.CHANGE);
        self.$target.val(self.checkMinMax(self.$target.val()));
        self.$target.trigger('change');
    });
}

//숫자, -, . 을 제외한 값 삭제 처리
vacationFormat.prototype.removeData = function(data){
    const regExp = /[^0-9.-]/g;
    const returnData = data.replace(regExp, '');

    return returnData;
}

vacationFormat.prototype.keyup = function(evt){
    const self = evt.data.self;
    const ele = evt.target;

    ele.value = self.removeData(ele.value);
    ele.value = self.checkMinMax(ele.value);
    //console.log(ele.value);
}
vacationFormat.prototype.keypress = function(evt){
    const self = evt.data.self;
	const charCode = (evt.which) ? evt.which : event.keyCode;

	if (charCode != 45 && charCode != 46  && (charCode < 48 || charCode > 57))
		return false;

	// Textbox value
	const _value = event.srcElement.value;

    // 입력되는 값이 숫자인지 체크
    if(!$.isNumeric(Number(_value+String.fromCharCode(charCode))) && charCode != 45)
        return false;
    
    // '-' 표시는 한번만 입력 가능
    const minus = _value.split('-');
    if(charCode == 45 && minus.length>1)
        return false;

	// 소수점(.)이 두번 이상 나오지 못하게
	const _pattern0 = /(^\d*[.]\d*$)|(^-\d*[.]\d*$)/; // 현재 value값에 소수점(.) 이 있으면 . 입력불가
	if (_pattern0.test(_value)) {
		if (charCode == 46) {
		    return false;
		}
	}

	// 현재 _value값이 2자리 숫자이면 소수점(.) 또는 (-) 만 입력가능 
	const _pattern1 = /(^\d{2}$)|(^-\d{2}$)/;
	if (_pattern1.test(_value)) {
		if ( charCode != 45 && charCode != 46) {
			alert(self.MIN + " ~ " + self.MAX + " 사이의 숫자만 입력가능합니다!");
			return false;
		}
	}

	// 입력 양식 체크
	const _pattern2 = /(^\d{2}[.]\d{2}$)|(^-\d{2}[.]\d{2}$)/;
	if (_pattern2.test(_value) && charCode !=45) {
		//alert("소수점 둘째자리까지만 입력가능합니다.");
        alert(self.MIN + " ~ " + self.MAX + " 사이의 숫자만 입력가능합니다!");
		return false;
	}
    
	return true;
}

vacationFormat.prototype.change = function(evt){
    const self = evt.data.self;
	const ele = evt.target;
	ele.value = self.removeData(ele.value);
    let splitArr = ele.value.split('.');

    //숫자가 아닌 값이 입력된 경우 예외 처리
    if(!$.isNumeric(Number(ele.value))){
        ele.value = "00.00";
        alert(self.MIN + " ~ " + self.MAX + " 사이의 숫자만 입력가능합니다!");
        return false;
    }

	//.으로 나눠서 앞자리, 뒷자리에 0 붙여주기
	if(splitArr.length === 2){
		if(splitArr[0].length === 0){
			ele.value = "00" + ele.value;
		}
		else if(splitArr[0].length === 1){
			ele.value = "0" + ele.value;
		}
		else if(splitArr[0].length === 2 && splitArr[0].includes('-')){
			ele.value = "-0" + ele.value.split('-')[1];
		}
		
		if(splitArr[1].length === 0){
			ele.value += "00";
		}
		else if(splitArr[1].length === 1){
			ele.value += "0";
		}
	}
	else{//소수점 없을 경우
		if(ele.value.length === 1){//한자리일 경우
			ele.value = "0"+ele.value;
		}
		else if(ele.value.length === 2 && ele.value.includes('-')){
			ele.value = "-0"+ele.value.split('-')[1];
		}
        else if(ele.value.length == 0){//빈값일 경우
            ele.value = "00";
        }
        
		ele.value += ".00";
	}

	//소수점 값 확인
	splitArr = ele.value.split('.');//값 갱신용
	if(splitArr.length === 2 && splitArr[1]%25 !== 0){// . 을 입력하고 소수점이 0.25단위가 아닌 경우
		ele.value = splitArr[0]+'.00';
		alert("소수점 둘째자리는" + self.CHANGE + "단위로 입력 가능합니다.")
        return false;
	}
}