고정 헤더 영역
상세 컨텐츠
본문
jquery를 이용해서 해당 코드를 작성했다.
여기서는 input tel을 이용했지만, 은행이나 돈과 관련된 내용에서는
input number 태그를 사용할 것으로 판단된다.
내가 테스트해본 결과 다음 테스트 코드에서 태그를 number로 했을때는 ,으로 바뀌는 코드 부분이 작동하지 않는 것으로 확인되었다.
input number 태그로 모바일웹앱에서 #,* 과같은 키패드를 노출시키지 않기위해서는 좀더 테스트를 해봐야할 듯하다..
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<input type="tel" name="numkeyinput" id="numkeyinput" placeholder="숫자" pattern="[0-9]" inputmode="numeric">
<script type="text/javascript">
$('#numkeyinput').keyup(function(event){
console.log("keyup");
if(event.which >= 37 && event.which <= 40){
event.preventDefault();
}
var $this = $(this);
var num = $this.val().replace(/,/g, '');
$this.val(num.replace(/(\d)(?=(\d)+(?!\d))/g, "$1,"));
});
</script>
</body>
</html>
