2022. 10. 27. 21:32
반응형
입력창에 금리 등의 값을 입력하는 경우 숫자, 소수점만 입력되도록 하면 좋다.
inputmask 플러그인을 이용해도 되지만 플러그인을 사용할 수 있는 상황이 아니라면 직접 구현해야 한다.
이벤트 하나만 이용해서 해보려고 했는데 좀 무리가 있어서 최소 2개, 넉넉하게 3개는 이용해야 했다.
keydown 이벤트로 직전 값을 기억해두고 input 이벤트로 현재 입력값을 정규식을 통해 확인하여 적절한 값이면 입력되도록 하고, 적절하지 않으면 방금 keydown 이벤트로 저장한 값으로 되돌린다.
여기까지 해도 충분하지만 마지막에 change 이벤트를 이용해 입력을 소수점까지만 했을 경우 그 뒤에 0을 붙여주는게 좋아보였다.
<input type="text" id="testInput" />
<script>
function inputFixed(el, digit, decimal) {
var val = "";
el.addEventListener("keydown", function (e) {
val = e.target.value;
});
var regexInput = RegExp("(^[0-9]{0," + digit + "}$)|(^[0-9]{1," + digit + "}[.][0-9]{0," + decimal + "}$)");
// /(^[0-9]{0,2}$)|(^[0-9]{1,2}[.][0-9]{0,2}$)/ -> 39.02
el.addEventListener("input", function (e) {
if (e.target.value === ".") {
e.target.value = "0.";
} else if (e.target.value && !regexInput.test(e.target.value)) {
e.target.value = val;
}
});
var regexChange = RegExp("^[0-9]{0," + digit + "}[.]$");
el.addEventListener("change", function (e) {
if (e.target.value && regexChange.test(e.target.value)) {
e.target.value = e.target.value + "0";
}
});
}
inputFixed(document.getElementById("testInput"), 3, 2);
</script>
반응형
'dev' 카테고리의 다른 글
[JavaScript] 소수(prime number) 찾기 (1) | 2024.11.15 |
---|---|
[JavaScript] 카카오맵 API 주소 입력하여 좌표 구하기 (0) | 2022.12.26 |
[Java/Spring] RestTemplate 이용 get, post 테스트 (3) | 2022.11.03 |
[JavaScript] input 숫자 3자리마다 콤마(,) 넣기 (0) | 2022.10.25 |
[Java/Spring] NamedParameterJdbcTemplate 활용 DB 접근 (1) | 2022.09.22 |
[Java] 페이징 처리를 위해 간단히 만든 Pagination 클래스 (0) | 2022.09.04 |
[Java] 간단한 Spring Boot 프로젝트 생성, 실행 (0) | 2022.09.03 |
[JavaScript] HTML canvas 마우스로 그리기 (0) | 2022.06.17 |