맨위로가기
 

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>

예시) jQuery Plugin 형태의 개발

<div id="sbArea"></div>

<script>

   $(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
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 사항

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.dynamic string 형태로 입력하여 동적 생성 t | p | s | h
SBUxMethod.render <sbux-xxx tag >랜더링 t | p | s | h
SBUxMethod.validateRequired required 속성이 있는 컴포넌트 체크 t | p | s | h