Component

TextInput

Basic

TextInput 컴포넌트 입니다. class="TextInput"

<input id="textId" class="Textinput">

입력값을 제한하고 싶다면 MaskedInput을 참고하세요.

숫자만 입력가능:

<input class="Textinput" data-keyfilter-rule="digits"> // 숫자만 입력 가능

Attributes

data-disabled

“true”
- 마크업으로 버튼을 비활성화 시킵니다.

<input id="textId" class="Textinput" data-disabled="true">

Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

disabled

data-disabled 참고

Functions

.getOptions() 3.0.0+

Textinput에 설정된 옵션값을 모두 가져올 수 있습니다.

Return {object}
- object
  - Textinput에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Textinput에 설정된 모든옵션값을 가져옵니다.
$('#Textinput').getOptions();

.setEnabled (isEnabled)

TextInput의 활성화/비활성화를 동적으로 조정할 때 사용하는 함수입니다.

parameter
- isEnabled {Boolean} Required
  - 설정된 Boolean값에 의해서 TextInput이 활성화/비활성화 됩니다

<input id="text0" class="Textinput">
<button id="btn0" class="Button">Disable</button>

function disableAction() {
	if ($('#btn0').text() == 'Enable') {
		$('#text0').setEnabled(true);
		$('#btn0').text('Disable');
	} else {
		$('#text0').setEnabled(false);
		$('#btn0').text('Enable');
	}
}
$('#btn0').on("click", disableAction);

Target Text에 값을 입력후 Get Text 버튼을 누르면 사용자가 입력한 텍스트가 출력됩니다. Set Text에 텍스트를 입력하고 버튼을 누르면 Target에 사용자가 입력한 텍스트가 출력됩니다.

Target Text:

가져온 텍스트:

입력 텍스트:

<div class="Margin-bottom-5">
	<label><strong>Target Text: </strong>
	<input id="text1" class="Textinput"></label>
</div>
<div class="Margin-bottom-5">
	<label for="span1">가져온 텍스트: </label>
	<span id="span1"></span>
	<button id="btn1" class="Button">Get Text</button>
</div>
<div>
	<label>입력 텍스트: <input id="text2" class="Textinput"></label>
	<button id="btn2" class="Button">Set Text</button>
</div>

function getText() {
	$('#span1').text($('#text1').val());
}
function setText() {
	$('#text1').val($('#text2').val());
}
$('#btn1').on('click', getText);
$('#btn2').on('click', setText);

.setOptions(options) 3.0.0+

Textinput에 동적으로 옵션을 설정합니다.

Parameters
- options {object}
  - Textinput에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.

$('#Textinput').setOptions({
	disabled: true
});

본문 상단으로 이동