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
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
disabled
Functions
.getOptions()
Textinput에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Textinput에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Textinput에 설정된 모든옵션값을 가져옵니다.
$('#Textinput').getOptions();
.setEnabled (isEnabled)
TextInput의 활성화/비활성화를 동적으로 조정할 때 사용하는 함수입니다.
- parameter
- isEnabled {Boolean} Required
- 설정된 Boolean값에 의해서 TextInput이 활성화/비활성화 됩니다
- isEnabled {Boolean} Required
<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에 사용자가 입력한 텍스트가 출력됩니다.
<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)
Textinput에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Textinput에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Textinput').setOptions({
disabled: true
});