MultipleInputBox

여러 입력이 가능한 입력상자를 만들어준다.
https://github.com/mins01/ui_MultipleInputBox


			method
			
				
				.toArray(); 배열로 내용 가져오기
				
				
				
				.addInputBoxes(Array) 배열을 기준으로 여러 inputbox 를 추가하기
				.addInputBox([str]) inputbox 추가하기 (처리 이벤트가 추가됨)
				.addRawTextBox([str]) inputbox 추가하기
				.getInputBoxes(); inputbox 의 입력 부분에 대한 Nodelists
				.setCustomInputBox(html_node|String|Function); data-inputBoxType=custom 일 경우 사용할 inputBox형태(.multipleInputBox-input 부분만 교체됨)
			
			
			
			property
			
				.value INPUT.value 와 같은 동작을 한다.(내부적으로 .setText,.getText)
				.length inputbox의 갯수 반환
			
			attribute
			
				data-inputBoxType="type" //div(기본),text,number,custom 등 추가되는 inputBox 의 타입 설정. custom 설정시 .setCustomInputBox()의 설정이 적용됨
				data-removeEmptyBox //빈 inputbox 자동 삭제
				data-separator="," //문자열 구분자(기본:,)
				data-useJSON //데이터 serialize 처리시 json 방식을 사용한다.
				data-min //inputbox의 최소수 (data-removeEmptyBox 적용 시 동작 안한다!)
				data-max //inputbox의 최대수
				data-autoAddInputBox //tab or enter시 자동으로 inputbox를 새로 추가
				data-autoAddInputBoxOnlyTap //tab으로만 자동으로 inputbox를 새로 추가(enter로 form의 onsubmit 동작 함)
				data-autoRemoveInputBox //delete, backspace 시 자동 삭제
				data-list //input 태그의 list의 값으로 설정
				data-prefix //접두사 (value에는 영향 안 미침)
				data-suffix //접미사 (value에는 영향 안 미침)
				data-once-required //최초의 inputbox에만 required 설정한다. 
			
			customEvent
			
				addinputbox //inputbox 가 추가 될 때마다. 사용하지 마라.. 어떻게 될지 모르겠다.
			
			CSS
			
				.multipleInputBox-inline // inline-block 으로 보여짐
			
			ETC
			
				ctrl + leftarrow ,ctrl + rightarrow 로 inputbox간 이동 가능

.addInputBox()

@data-inputBoxType="div" //자동으로 너비가 늘어남 // 더이상 지원 안됨. text로 대체. 다른 것도 자동으로 너비가 늘어남!

하늘이, 뭐라하더냐, 난들아냐

@data-inputBoxType="text"

하늘이, 뭐라하더냐, 난들아냐

@data-inputBoxType="number"

@data-inputBoxType="range"

@data-removeEmptyBox //빈 inputbox 자동 삭제

@data-separator="^" //문자열 구분자 변경

@data-useJSON //serialize 처리에 JSON 사용

//내부에 inputbox 없이 사용

CSS .multipleInputBox-inline

인라인으로도 동작이 됩니다.

data-min="3" data-max="5" //inputbox 의 최수/최대 갯수

data-inputBoxType="custom"
cfg{customInputBox:'<input type="text" placeholder="input here" style="background-color:#abc" />'}

data-inputBoxType="custom"
cfg{customInputBox:document.querySelector('.mib14-select')}

data-inputBoxType="custom"
cfg{customInputBox:function(mib){~~~}}

data-autoAddInputBox //탭과 엔터로 inputbox 자동 추가(enter로 submit 불가)

data-autoAddInputBoxOnlyTap //탭으로만 inputbox 자동 추가(enter로 submit 가능)

data-autoAddInputBox & data-autoRemoveInputBox

data-prefix & data-suffix

data-once-required 최초의 inputbox에만 required 설정한다.

MultipleInputBox

method

property

attribute

customEvent

CSS

ETC

.addInputBox()

@data-inputBoxType="div" //자동으로 너비가 늘어남 // 더이상 지원 안됨. text로 대체. 다른 것도 자동으로 너비가 늘어남!

@data-inputBoxType="text"

@data-inputBoxType="number"

@data-inputBoxType="range"

@data-removeEmptyBox //빈 inputbox 자동 삭제

@data-separator="^" //문자열 구분자 변경

@data-useJSON //serialize 처리에 JSON 사용

//내부에 inputbox 없이 사용

CSS .multipleInputBox-inline

data-min="3" data-max="5" //inputbox 의 최수/최대 갯수

data-inputBoxType="custom" cfg{customInputBox:'<input type="text" placeholder="input here" style="background-color:#abc" />'}

data-inputBoxType="custom" cfg{customInputBox:document.querySelector('.mib14-select')}

data-inputBoxType="custom" cfg{customInputBox:function(mib){~~~}}

data-autoAddInputBox //탭과 엔터로 inputbox 자동 추가(enter로 submit 불가)

data-autoRemoveInputBox //backspace와 delete 시 값이 없으면 inputbox 삭제

data-autoAddInputBoxOnlyTap //탭으로만 inputbox 자동 추가(enter로 submit 가능)

data-autoAddInputBox & data-autoRemoveInputBox

data-prefix & data-suffix

data-once-required 최초의 inputbox에만 required 설정한다.

data-inputBoxType="custom"
cfg{customInputBox:'<input type="text" placeholder="input here" style="background-color:#abc" />'}

data-inputBoxType="custom"
cfg{customInputBox:document.querySelector('.mib14-select')}

data-inputBoxType="custom"
cfg{customInputBox:function(mib){~~~}}