기초튜토리얼 [Wijmo 시작하기] Input Number & Mask 사용법 - 기본편(1)
페이지 정보
작성자 GCK루시
작성일 2023-05-09 16:45 조회 403회
댓글 0건
본문
관련링크
Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
Wijmo에는 비즈니스 애플리케이션에서 빼놓을 수 없는 입력 기능을 폭넓게 지원하는 입력 컨트롤군 "Input(인풋)"이 포함되어 있습니다. 이번 포스팅에서는 그 중에서 "InputMask(마스크입력)"와 "InputNumber(숫자입력)"의 기본적인 사용법을 소개하도록 하겠습니다.
목차
1. 개발 환경
개발 환경
이번 포스팅에서는 아래 다음 개발 환경을 사용하였습니다.
더불어 이번 Input 시작하기 글에서 사용할 파일은 아래와 같습니다.
index.html |
페이지 메인. 페이지의 요소로 InputMask 및 InputNumber를 배치합니다. |
app.js |
InputMask와 InputNumber의 다양한 기능을 구현하기 위한 코드를 입력합니다. |
style.css |
각종 페이지 요소의 스타일 정의를 합니다. |
입력 컨트롤 기능을 사용하는 데 필요한 Wijmo 모듈 등에 대한 참조 설정은 "index.html"에서 수행됩니다. 또한 input 요소를 아래와 같이 추가하여 InputMask 및 InputNumber의 처리를 수행할 예정입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Input 컨트롤 시작하기</title>
<link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.input.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div>
<div>
<label for="Wijmo_InputMask" class="control">InputMask</label>
<div id="Wijmo_InputMask"></div><br>
<label for="overwrite">덮어쓰기</label>
<input id="overwrite" type="checkbox"><br>
<label for="maskfull">입력 완료 확인</label>
<input id="maskfull" type="checkbox"><br>
</div>
<hr>
<div>
<label for="Wijmo_InputNumber" class="control">InputNumber</label>
<div id="Wijmo_InputNumber"></div><br>
<label for="min">최소값</label>
<input id="min" type=number value="0"><br>
<label for="max">최대값</label>
<input id="max" type=number value="9999"><br>
<label for="spin">증감 버튼 추가</label>
<input id="spin" type="checkbox"><br>
<label for="step">증감치</label>
<input id="step" type=number value="0"><br>
</div>
</div>
</body>
</html>
페이지의 요소의 스타일을 "styles.css"에서 정의합니다.
label {
display: block;
float: left;
margin-right: 15px;
text-align: right;
width: 150px;
}
.state-invalid {
color: red;
}
.control {
color:blue;
font-weight:bold;
}
InputMask 컨트롤 생성
이제 "index.html", "app.js"에 코드를 작성하여 InputMask 컨트롤을 생성합니다. 해당 코드에서 5자리 숫자와 4자리 숫자를 입력하는 mask를 설정합니다.
document.addEventListener("DOMContentLoaded", function () {
//InputMask 컨트롤 생성
const mask = new wijmo.input.InputMask('#Wijmo_InputMask', {
isRequired: false,
mask: '00000-0000',
placeholder: '숫자5자리＋숫자4자리',
value: ''
});
// valueChanged 이벤트 핸들러 설정 : 입력 완료까지 붉은 색 표시
mask.valueChanged.addHandler(function (sender) {
if(document.querySelector('#maskfull').checked){
wijmo.toggleClass(sender.hostElement, 'state-invalid', !sender.maskFull);
}else{
wijmo.toggleClass(sender.hostElement, 'state-invalid', false);
}
});
// 덮어쓰기 전환
document.querySelector('#overwrite').addEventListener('click', e => {
mask.overwriteMode = e.target.checked;
});
});
InputMask 컨트롤에서 사용하는 속성과 이벤트의 기능은 다음과 같습니다.
mask |
입력 마스크 |
maskFull |
입력 완료 판별 |
isRequired |
필수 입력 여부 |
overwriteMode |
덮어쓰기 모드 |
placeholder |
입력되지 않았을 때 표시할 문자열 |
value |
표시 문자열(리터럴 문자 포함) |
valueChanged |
문자열 변경 시 발생 이벤트 |
InputMask 컨트롤은 mask 속성을 사용하여 입력할 수 있는 문자 유형과 문자 수를 지정합니다. 구성 가능한 문자 유형 및 속성에 대한 내용은 API 문서를 참고하여 주시길 바랍니다.
샘플에서 "덮어쓰기" 체크박스를 클릭하면, overwriteMode 속성이 true가 되면서 삽입 모드(기본값)를 덮어쓰기 모드로 전환합니다.
더불어 입력 완료 체크박스를 클릭하면, 조건에 맞는 입력이 완료되기 전까진 문자열이 빨간색으로 표시되고 입력이 완료되면 기본 검정색으로 돌아갑니다. 해당 기능의 경우, maskFull 속성과 valueChanged 이벤트를 사용합니다.
Wijmo 이벤트 핸들러 추가 및 삭제는 Wijmo와 HTML 이벤트 도움말에 설명되어 있는 대로, addEventListener 메서드와 removeEventListener 메서드가 아닌 addHandler 메서드와 removeHandler 메서드를 사용하고 있습니다.
마스크 입력이 완료되지 않는 경우 문자열이 빨간색으로 표시된다고 언급하였는데, 이때 문자열의 색은 CSS의 ".state-invalid"로 설정하고 있습니다.
마스크 입력이 완료되면 문자열이 검정색으로 바뀝니다.
InputNumber 컨트롤 생성
그 다음 "app.js"에 아래 코드를 추가하여 InputNumber 컨트롤을 생성합니다.
document.addEventListener("DOMContentLoaded", function () {
//InputMask 컨트롤 생성
・・・（생략）
//InputNumber 컨트롤 생성
const number = new wijmo.input.InputNumber('#Wijmo_InputNumber', {
format: 'C0',
isRequired: false,
min: Number(document.querySelector('#min').value),
max: Number(document.querySelector('#max').value),
placeholder: '통화 서식(정수)',
value: null
});
// 최소값, 최대값 설정
document.querySelector('#min').onchange = function(){
number.min = Number(document.querySelector('#min').value);
}
document.querySelector('#max').onchange = function(){
number.max = Number(document.querySelector('#max').value);
}
// 증감 설정 허가
document.querySelector('#spin').addEventListener('click', e => {
if(e.target.checked){
if(Number(document.querySelector('#step').value) < 1){
document.querySelector('#step').value = 1;
}
}else{
document.querySelector('#step').value = 0;
}
number.step = Number(document.querySelector('#step').value);
});
document.querySelector('#step').onchange = function(){
if(document.querySelector('#spin').checked){
number.step = Number(document.querySelector('#step').value);
}
}
});
InputNumber 컨트롤에서 사용하는 속성과 이벤트의 기능은 다음과 같습니다.
format | 숫자 서식 |
max | 입력 가능한 최대값 |
min | 입력 가능한 최소값 |
step | 증감 조작 시의 증감량 |
isRequired | 필수 입력 여부 |
placeholder | 입력하지 않을 때 표시할 문자열 |
value | 컨트롤의 값(숫자 또는 null) |
InputNumber 컨트롤에서는 숫자의 서식 뿐만 아니라 입력 가능한 최대값/최소값이나 증감 조작을 통한 증감량을 지정할 수 있습니다. 숫자 서식을 지정하는 format 속성은 표준 숫자 서식 문자열을 따릅니다.
맞춤형 숫자 형식 문자열은 지원되지 않으니 참고 부탁드립니다. 또한 스핀 기능을 활성화하기 위해서는 showSpinner 속성을 true(기본값)으로 설정하고 step 속성을 0이 아닌 값으로 설정합니다.
이 샘플에서는 스핀 허용 체크박스를 선택했을 대 증감 값이 텍스트 상자에 입력된 값을 속성으로 설정하여 스핀 기능을 활성화합니다.
InputNumber 클래스에서 사용할 수 있는 기능에 대해서는 InputNumber API 문서에서 확인할 수 있습니다.
이번에는 Wijmo Input 컨트롤 중 InputMask와 InputNumber의 기본 기능에 대해 소개해 보았습니다. Wijmo에는 InputMask, InputNumber 컨트롤 외에도 MultiSelect, AutoComplete, ComboBox, InputDate 등 다양한 Input 컨트롤이 준비되어 있으니 다양한 애플리케이션에 최적의 입력 기능을 제공하는 Wijmo를 이용하여 개발해 보시길 바랍니다.
다음 포스팅에서는 Input 컨트롤의 기본 기능(2)- "날짜입력"에 대해 소개하도록 하겠습니다.
다음 시리즈 글도 기대해 주세요!
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
