SBUx

Input

데이터를 입력할 때 사용하는 입력 컴포넌트 입니다.

사항	설명		비고
HTML 태그 형태	<sbux-input></sbux-input>
필수 속성	id, name, uitype
필수 속성	* 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑
uitype 속성 값	text, password, search, hidden

예시) HTML 형태의 개발
<script> function evt_keyenter(args){ alert("엔터시 이벤트 :" + args); } </script> <sbux-input id="idxInput_text" name="input_text" uitype="text" placeholder="placeholder 구문입니다." minlength="3" maxlength="15" onkeyenter="evt_keyenter(nmInput)" icon-glyphs="glyphicon-pencil" required></sbux-input>

예시) HTML 형태의 개발

function evt_keyenter(args){

alert("엔터시 이벤트 :" + args);

}

</script>

<sbux-input id="idxInput_text" name="input_text" uitype="text"

placeholder="placeholder 구문입니다."

minlength="3" maxlength="15"

onkeyenter="evt_keyenter(nmInput)"

icon-glyphs="glyphicon-pencil"

required></sbux-input>

예시) jQuery Plugin 형태의 개발
<div id="sbArea"></div> <script> $(document).ready(function(){ $('#sbArea').sbInput({ name : 'sbScriptNm', uitype : 'text' }); }); </script>

예시) jQuery Plugin 형태의 개발

$(document).ready(function(){

$('#sbArea').sbInput({

name : 'sbScriptNm',

uitype : 'text'

});

</script>

속성명	설명 / 유형(t:text,p:password,s:search,h:hidden)		비고
init	초기값	t \| p \| s \| h
required	필수 입력 지정	t \| p \| s
validation-msg	유효성 검사 메세지 커스텀	t
disabled	비활성	t \| p \| s
readonly	읽기 전용	t \| p \| s
group-id	그룹으로 묶일 id	t \| p \| s \| h
placeholder	데이터가 없을 때 나타나는 구문	t \| p \| s
minlength	최소 길이 값	t \| p \| s
maxlength	최대 길이 값	t \| p \| s
mask	화면에 나타나는 masking	t \| s
next-focus-id	enter 입력시 지정한 컴포넌트로 focus 이동	t \| p \| s
ime-mode	IE 브라우저 지원 IME 모드	t \| p \| s	active, inactive, disabled
autocomplete-ref	자동 완성 기능 참조 데이터 객체명	t \| s
autocomplete-text	text 에 대한 참조 key 명	t \| s
autocomplete-value	value 에 대한 참조 key 명	t \| s
autocomplete-height	자동 완성 기능 팝업 창 높이	t \| s
autocomplete-zindex	자동 완성 기능 팝업 z-index	t \| s
autocomplete-filter-starts-with	문장의 첫글자부터 검색	t \| p
autocomplete-prefix	팝업되는 리스트의 Text 앞에 특정 문구	t \| p	선택 후 prefix 자동 제거
autocomplete-suffix	팝업되는 리스트의 Text 뒤에 특정 문구	t \| p	선택 후 suffix 자동 제거
autocomplete-placement	팝업되는 리스트의 위치	t \| p
hidden-event	다른 문자로 변경하는 방식 설정	t \| p	blur, keyup
hidden-start-index	변경하고자 하는 시작 자릿수	t \| p	없을 시 처음부터
hidden-end-index	변경하고자 하는 종료 자릿수	t \| p	없을 시 끝까지
hidden-symbol	변경하고자 하는 문자	t \| p
permit-keycodes-set	입력 허용하는 문자 셋	t \| p	num,kr,en 한글과 숫자(kr,num) 영어와 숫자(en,num) 사용자 지정(custom)
exclude-kr	한글 입력 금지	t \| p
auto-fill-phone-dashes	전화번호 입력에 따라 자동 '-' 추가	t \| s
unmask-phone-dashes	API get 시 unmask 형태 여부	t \| s
show-clear-button	우측에 'X' 버튼 생성	t \| p \| s	icon-glyphs 속성과 중복 사용 금지
detect-attack	SQL Injection 및 XSS 검사를 시행	t \| p \| s
button-front-text	검색 입력란 앞에 붙는 버튼명	s
button-front-class	검색 입력란 앞에 붙는 버튼 CSS Class	s
button-back-text	검색 입력란 뒤에 붙는 버튼명	s
button-back-class	검색 입력란 뒤에 붙는 버튼 CSS Class	s
event-ignore-readonly	readonly 속성시 버튼의 비활성을 활성상태로	s
grid-id	연동되는 그리드 id	t \| p \| s \| h
grid-direction	데이터의 진행 방향	t \| p \| s \| h
grid-status	그리드 행의 상태 변화	t \| p \| s \| h
grid-event	연동시점 그리드 이벤트	t \| p \| s \| h	(valuechanged \| undefined(이벤트 발생안함))
grid-ref	그리드의 Column Reference 값	t \| p \| s \| h	grid 컬럼 ref 지정
grid-jit	입력되는 즉시 반영	t \| p \| s \| h
autocomplete-select-callback	자동 완성 기능 팝업 선택시 발생 이벤트	t \| p
button-front-event	입력란 앞 버튼 클릭시 이벤트	s
button-back-event	입력란 뒤 버튼 클릭시 이벤트	s
onclick	클릭시 이벤트	t \| p \| s
onkeyenter	Enter 키 입력시 이벤트	t \| p \| s

API 명	설명 / 유형(t:text,p:password,s:search,h:hidden)		비고
SBUxMethod.set	값을 입력	t \| p \| s \| h
SBUxMethod.get	저장된 값 호출	t \| p \| s \| h
SBUxMethod.attr	속성값 변경	t \| p \| s	(readonly \| disabled)
SBUxMethod.refresh	재호출	t \| p \| s \| h
SBUxMethod.hide	감추기	t \| p \| s
SBUxMethod.show	보이기	t \| p \| s
SBUxMethod.getAllData	전체데이터 가져오기	t \| p \| s \| h
SBUxMethod.clearAllData	전체데이터 지우기	t \| p \| s \| h
SBUxMethod.getGroupData	group-id 로 묶여진 컴포넌트 데이터 가져오기	t \| p \| s \| h
SBUxMethod.clearGroupData	group-id 로 묶여진 컴포넌트 데이터 지우기	t \| p \| s \| h
SBUxMethod.changeGroupAttr	group-id 로 묶여진 컴포넌트 데이터 속성변경	t \| p \| s \| h	(readonly \| disabled)
SBUxMethod.showGroup	group-id 로 묶여진 컴포넌트 보이기	t \| p \| s \| h
SBUxMethod.hideGroup	group-id 로 묶여진 컴포넌트 감추기	t \| p \| s \| h
SBUxMethod.refreshGroup	group-id 로 묶여진 컴포넌트 refresh	t \| p \| s \| h
SBUxMethod.render	<sbux-xxx tag >랜더링	t \| p \| s \| h
SBUxMethod.validateRequired	required 속성이 있는 컴포넌트 체크	t \| p \| s \| h

SBUx 가이드

Input

기본 사항

주요 속성 사항

주요 API 사항