웹페이지를 개발하다 보면은 사용자가 보이기 편하도록 단위마다 콤마도 붙여줘야 하고 소수점도 받아야 합니다. 하지만, 숫자외에 입력을 받다보면은 문제가 생길수 있어서 아래의 코드를 적용하면은 숫자외에는 입력을 받지 않기 때문에 사용자의 입력을 제한 할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="input1" placeholder="숫자를 입력해주세요"
onKeyUp="removeChar(event);inputNumberFormat(this);"
onKeyDown="inputNumberFormat(this);" >
<script>
//문자 제거
function removeChar(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if (keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39)
return;
else
//숫자와 소수점만 입력가능
event.target.value = event.target.value.replace(/[^-\.0-9]/g, "");
}
//콤마 찍기
function comma(obj) {
var regx = new RegExp(/(-?\d+)(\d{3})/);
var bExists = obj.indexOf(".", 0);//0번째부터 .을 찾는다.
var strArr = obj.split('.');
while (regx.test(strArr[0])) {//문자열에 정규식 특수문자가 포함되어 있는지 체크
//정수 부분에만 콤마 달기
strArr[0] = strArr[0].replace(regx, "$1,$2");//콤마추가하기
}
if (bExists > -1) {
//. 소수점 문자열이 발견되지 않을 경우 -1 반환
obj = strArr[0] + "." + strArr[1].substring(0,2);
} else {
//정수만 있을경우 //소수점 문자열 존재하면 양수 반환
obj = strArr[0];
}
console.log(obj);
return obj;//문자열 반환
}
//콤마 풀기
function uncomma(str) {
str = "" + str.replace(/,/gi, ''); // 콤마 제거
str = str.replace(/(^\s*)|(\s*$)/g, ""); // trim()공백,문자열 제거
return (new Number(str));//문자열을 숫자로 반환
}
//input box 콤마달기
function inputNumberFormat(obj) {
obj.value = comma(obj.value);
}
//input box 콤마풀기 호출
function uncomma_call(){
var input_value = document.getElementById('input1');
input_value.value = uncomma(input_value.value);
}
</script>
</body>
</html>
사용자의 입력을 제한하게 되면은 조금은 문제가 될 수 있지만, 정확한 값을 받아서 정확하게 계산을 해줘야 하는곳에는 해당 기능을 통해서 값을 제한해야 합니다. 그렇게 해야지만이 조금이라도 작업을 편하게 할 수 있고 계산을 하는 과정에서 오류가 발생하지 않기 때문에 제한을 해야 됩니다.