InputBox

수정 일자 버전 (SP2)

InputBox는 HTML에서 제공되는 <input> 태그의 type=text와 유사한 인터페이스를 제공합니다.

기본 텍스트 입력기능 외에 추가적으로 display fomat를 지정할 수 있으며, 지정하지 않은 문자열은 입력이 불가능하게 하는 기능이 있습니다. validator의 기능이 있는 컨트롤 입니다.

Property

Property

Description

adjustMaxLength SP2

dataType이 number이며 제일 처음이 부호(-, +)일때 maxlength값 조절 여부

autoFocus SP2

nextTabID가 지정되어 있는 경우, maxByteLength 지정값과 일치할 경우 자동으로 focus를 이동시킬지 유무

class

HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의 한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.

customModelFormatter SP2

[default: ""] dataCollection과 바인딩 시, dataCollection에 값이 저장되기 전에 실행되는 사용자 정의 함수. 사용자 정의 함수를 실행하고 해당 함수에서 반환하는 값으로 dataCollection에 저장한다.

customModelUnformatter SP2

[default: ""] dataCollection과 바인딩 시, dataCollection에서 값을 읽어올 때 값을 반환하기 전에 실행되는 사용자 정의 함수. 예를들어서 getCellDisplayData API를 실행하면, 해당 속성으로 정의한 사용자 정의 함수를 실행한 결과 값을 반환한다.

id

컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다.

disabled

[default:false, true]HTML의 disabled속성과 동일한 기능을 제공하며 컴포넌트를 비활성화 시킨다.

displayFormat

엔진 내부에서 dataType 속성에 정의한 type에 따라 동작되며 excel의 서식을 적용하는 방식처럼 value의 format을 적용 할 수 있다.displayFormatter와 동시적용이 불가하다. 예시)dateType이 number일 경우 #,###.#0 으로 적용하면 3자리수 마다 ,가 찍히며 소수점 2자리까지 표현된다.

escape SP2

[true, false] <>&"를 HTML Escape 문자로 변환하여 화면에 표시한다.

euroMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "euro" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

fireEventOnInvalid SP2

[default:false] validation에 실패했을 때 이벤트를 발생시킬지의 여부

maxlength

입력 가능한 최대길이로 엔진에서 maxLength 이상의 글자를 입력하면 자동으로 잘라낸다.

minlength

validate API를 호출 할 때 엔진에서 최소길이 체크 시에 참조한다.

nextTabID SP2

tab으로 이동시 이동할 컴포넌트 ID

numberMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "number" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

onFocusClass

onFocus시 적용할 class명.

placeholder

HTML5의 placeholder 기능으로 사용자에게 알려줘야 할 문구(hint)등을 명시한다.

readOnly

[default:false, true]readonly의 여부로 HTML의 readonly속성과 동일한 기능을 제공한다.

readOnlyClass

readOnly 상태 일때 적용할 class명.

readOnlyFocusEvent SP2

[default:false, true]input객체가 readOnly 상태일 때 focus 이벤트를 발생시킬지에 대한 여부

refSync SP2

[default:false, true] input이 ref와 연동되어있는 경우 key가 입력되는 즉시 ref를 갱신하는 속성. input이 dataMap과 ref로 연동된 상태에서 onkeydown이벤트에서 dataMap1.getValue("key1")를 실행했을 때 이 속성이 true일 경우 input에 입력된 값 그대로 반환한다. https://inswave.com/jira/browse/SKT-782 참고 (버전 정보: 5.0_2.2777B.20170904.121217 버전에서 추가)

rupeeMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "rupee" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

style

InputBox의 style 속성

tabIndex

Tab Key를 이용 한 컴포넌트의 포커스 순서로 HTML의 tabindex속성과 동일한 기능을 제공한다.

tengeMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "tenge" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

title

HTML의 title속성과 동일한 기능으로 명시 된 값을 브라우저에서 마우스 over시 툴팁형태로 표현한다. 일반적으로 웹접근성 작업 시 설정한다.

type

HTML의 type속성과 동일한 기능으로 일반적으로 별도 지정을하진 않으며 HTML5에서의 data Type을 반영한 UI를 구현하고자 할 때 사용된다.예를 들어 type을 number로 지정 할 경우 모바일 브라우저에서 type을 보고 number key 패드를 올리게 할 수있다.그외 color로 지정 할 경우 colorPicker를 사용하지 않고 색을 선택 할수 있는 기능이 제공되나 해당 기능은 HTML5를 지원하는 브라우저에서만 작동되며 브라우저마다의 표현방법이 다르다.

useMonthYearFormat SP2

[default:false] dataType = "date"이고 useMonthYearFormat 속성이 적용된 inputCalendar와 바인딩 시 동일한 기능이 제공될 수 있도록 설정. inputCalendar의 useMonthYearFormat 기능 : 달력 및 입력창에서 보여지는 값의 표현방식이 연도/월의 순서를 월/연도로 변경함. dataCollection과 연동 시 dataCollection에 저장되는 값은 한국식 표현인 "연" > "월" > "일" 순서로 저장됨.

html attributes

해당 테그에 대응하는 속성을 추가한다.

class 적용과 스타일 변경

먼저 Inputbox 컴포넌트를 그린 후 클래스명을 ipt로 주겠습니다. 아래 화면을 보시면 Class에 w2input라는 클래스명을 보실 수 있습니다. 이 클래스는 컴포넌트가 가지고 있는 고유의 클래스명이며. 기본 스타일이 정의되어 있습니다. w2input이라는 클래스명을 사용하여 스타일을 주셔도 되지만, 그렇게 되면 모든 input스타일에 반영이 되니, 반드시 새로운 클래스를 부여하여 사용하시길 권장합니다.

2

ipt라는 클래스에 input의 사이즈, 폰트사이즈, 보더색상 등을 지정해 주었습니다.

/* css 예제 */
.ipt {
	 width:130px; 
	 height:30px; 
	 color:#000; 
	 font-size:13px;
	 border-color:#d4d4d4;
font-family:'돋움',dotum;
}
minor-latin;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin">cssminor-latin;mso-hansi-theme-font:minor-latin">를 지정해 주시고 브라우저 결과 화면은 아래와 같습니다.

InputBox 디자인 적용 예제

사용자 입력 불필요할 경우 제어를 비활성화 시키거나 읽기 전용으로 Propert 창에서 설정이 가능합니다.

Input을 비활성화 상태를 만들고자 할때는 property창에서 disabled 속성을 true로 설정하면 됩니다.

또한 읽기전용 상태를 만들고자 할때는 readOnly속성을 true로 설정해주시면 됩니다.

4

상태일때 스타일도 변경이 가능합니다. 예제에서 설명한 컴포넌트에는 .ipt의 스타일이 적용되어 있으므로, disabled상태일때만 별도로 css를 아래소스와 같이 지정해 주시면 됩니다.

input 비활성화 default 상태

input 비활성화 스타일 적용 예제

/* 비활성화 상태/disabled */
.ipt .w2input_disabled{background-color:##ebeced;}

레이블이 있는 inputBox

[textBox+inputBox로 <label for="inputID"><input id="inputID" /> 형태 그리기]

로그인 페이지의 아이디와 비밀번호, 회원가입시 주민번호, 전화번호 등에서 사용되는 서식제어요소(input, textarea 등)는 label 엘리먼트와 명시적으로 짝지어 주어야 합니다.

특히 접근성 작업시에는 반드시 넣어주셔야 합니다.

7

소스화면에 보시면 아이디 텍스트와 아이디의 인풋박스, 성명텍스트와 성명 인풋박스를 서로 매칭

textBox + inputBox 결과 모습

width 값을 %로 사용시 !important를 사용해야 하는 이유

input 컴포넌트의 경우 편집을 위해 포커스가 들어가면 .w2input_focus에서 2px border가 들어감으로 인해 box 사이즈가 커지게 됩니다. 이로 인해 relative나 static 한 코딩법으로 상,하,좌,우에 배치된 다른 컴포넌트의 영향을 주게 되는 문제를 방지하기 위해 엔진에서 강제로 현재 input box의 사이즈를 가져와 width/height를 각 2px씩 줄이는 처리를 합니다.

이런 처리로 인해 input 컴포넌트의 class로 width를 %로 지정할 경우 포커스가 들어갔다 나오면 px로 변경되어 %로 지정된 width값이 무시되어 더이상 유동적으로 리사이즈 되지 않습니다.

따라서, 기존에는 class로 독립시킨 input width를 !important로 우선순위를 높여 유지시키는 방법을 사용합니다.

/* css 예제 */
input {width:100% !important;}

하지만, 이런 방법이 불편하다면 Config.xml에 해당 옵션을 주어 처리 할 수 있습니다.

그 방법으로 Config.xml에 input에 정의된 항목 사이에 아래와 같이 붉은색 부분을 삽입하시면 됩니다.

<input>
        ...
        <focusCalcSize value="false"/>
</input>

위 옵션을 사용하게 되면 엔진에서는 더 이상 2px을 width/height를 줄이는 처리를 하지 않습니다.

해당 옵션은 input 컴포넌트에도 개별 적용이 가능합니다.

<xf:input.... focusCalcSize="false"....></xf:input>

CSS Overriding

06

No

Class

Description

1

w2input

w2input은 웹스퀘어 엔진에서 정의된 클래스입니다, 브라우저가 파싱할때 자동으로 부여됩니다.

2

ipt

자동 정의된 클래스인 w2input를 사용자가 오버라이드 합니다.

3

  • inline

websquare의 style 편집기에서 해당 style을 직접 수정합니다.

주의사항 및 Tip