입력 제어

allowChar

입력가능한 텍스트를 지정하여 사용자 입력을 제어할 수 있습니다.

숫자만 입력하기

allowChar 속성을 "0-9"로 설정하면 숫자만 입력 가능합니다.

$r_title(allowChar)
<xf:input id="input1" dataType="text" allowChar="0-9"></xf:input>

한글만 입력하기

allowChar 속성을 "가-힣"로 설정합니다. 한글의 경우 영문 알파벳과는 달리 모음자 자음의 결합으로 구성되기 때문에 "ㄱ-ㅎ"으로 설정할 경우, 텍스트는 입력 가능하지만 blur 상태에서는 텍스트가 사라지게 됩니다. 그렇기 때문에 가장 첫 글자인 "가" 와 가장 마지막인 "힣"으로 설정하면 모든 한글을 입력할 수 있습니다.

$r_title(allowChar)
<xf:input id="input1" dataType="text" allowChar="가-힣"></xf:input>

ignoreChar

allowChar의 반대 속성입니다. 입력 불가 텍스트를 지정하여 사용자 입력을 제어할 수 있습니다.

영어 알파벳 무시

ignoreChar="a-z A-Z"로 설정하면 영어 소문자 및 대문자 입력이 금지됩니다.

$r_title(allowChar)
<xf:input id="input1" dataType="text" ignoreChar="a-z A-Z"></xf:input>

복사하기 & 붙여넣기 방지하는 속성으로 기본값은 false입니다.

preventCopyPaste

복사하기 & 붙여넣기 방지하는 속성으로 기본값은 false입니다.

$r_title(preventCopyPaste="true")
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" preventCopyPaste="true"></xf:input>

출력 제어

아래 컴포넌트에 대해 displayFormat 및 displayFormatter 속성을 사용하여 사용자가 입력하는 데이터의 출력 방식을 설정할 수 있습니다.

• InputBox

• InputCalendar

• SearchBox

• Secret

displayFormat

데이터 유형별 입력 설정 및 특정 포맷을 지정할 수 있는 속성입니다. dataType에 따라 사용가능한 포맷이 다르며, 단순 포맷을 정의할 수 있습니다. dataType 속성을 설정하지 않으면 기본값은 "text" 입니다.

dataType은 입력되는 정보의 종류입니다. dataType에 따라 화면에 출력하는 포멧이 다릅니다. dataType으로는 text, number, date, time, bigDecimal 이 있습니다.

주민번호

$r_title(displayFormat="######-#######" dataType="text")
<xf:input id="input1" displayFormat="######-#######" dataType="text"></xf:input>

$r_title(사용 예)
input1.getValue() //1234561234567 반환
input1.getDisplayValue() //123456-1234567 반환

전화번호

$r_title(사용 예)
input1.getValue() //0220821400 반환
input1.getDisplayValue() //02)2082-1400 반환

시간

$r_title(displayFormat="HH:mm:ss" dataType="time")
<xf:input id="input3" dataType="time" displayFormat="HH:mm:ss"></xf:input>

소수 둘째자리까지 표현 (반올림)

$r_title(displayFormat="##.##" dataType="number")
<xf:input id="input3" dataType="number" displayFormat="##.##"></xf:input>

소수 둘째자리까지 표현 (무조건 올림)

$r_title(displayFormat="#.##[ceil]" dataType="number")
<xf:input id="input3" dataType="number" displayFormat="#.##[ceil]"></xf:input>

세번째 자리마다 "," 표시

$r_title(displayFormat="#,###" dataType="number")
<xf:input id="input3" dataType="number" displayFormat="#,###"></xf:input>

비율

$r_title(displayFormat="###.#0%" dataType="number")
<xf:input id="input3" dataType="number" displayFormat="###.#0%"></xf:input>

금액 ($)

$r_title(displayFormat="$ ###.#0%" dataType="number")
<xf:input id="input3" dataType="number" displayFormat="$ #,###.00"></xf:input>

$r_title(dataType="date" dateMask="yyyy년 MM월 dd일")
<xf:input id="input1" dataType="date" displayFormat="" dateMask="yyyy년 MM월 dd일"></xf:input>

날짜

dataType="date" 의 경우 dataMask 속성을 사용하여 데이터를 제어합니다.

displayFormatter

displayFormatter 속성에 사용자정의 함수를 설정하여 해당 사용자정의 함수의 반환값을 표시합니다.

대문자로 변환

$r_title(displayFormatter="setUserMask")
<xf:input id="input1" dataType="text" displayFormatter="setUserMask"></xf:input>

$r_title(setUserMask(value))
function setUserMask(value) {
    return value.toUpperCase();
}