텍스트 필드 위젯(테마 적용 가능)
텍스트 필드 위젯은 양식 내에서 일반적으로 사용되는 입력 요소입니다. 텍스트 필드를 사용하면 사용자가 매쉬업에 텍스트를 입력할 수 있습니다. Text 속성을 사용하여 필드 내에서 텍스트를 설정하거나 검색할 수 있습니다. 텍스트 영역 위젯과 달리 텍스트 필드는 한 줄로 제한됩니다. 공통 위젯 속성 외에도 다음과 같은 방법으로 속성을 사용하여 위젯을 구성할 수 있습니다.
• 최대 문자 수를 구성하고 카운터를 추가합니다.
• 텍스트를 데이터 서비스, 함수 및 기타 위젯의 입력으로 사용합니다.
• 값이 설정되지 않으면 힌트 텍스트를 표시합니다.
• 텍스트 지우기 버튼을 추가합니다.
• 읽기 전용 모드를 사용합니다.
• 암호와 같은 중요한 정보에 대한 입력을 숨깁니다.
• 마스크 패턴을 정의하여 입력이 특정 형식인지 확인합니다.
 |
텍스트 필드 위젯은 플랫폼에서 표준 위젯으로, 웹 구성 요소 SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다.
|
실행 시간에 위젯 값이 업데이트될 때 다음 위젯 이벤트를 사용하여 데이터 서비스 또는 함수를 실행할 수 있습니다.
• EnterKeyPressed - Enter 키를 누를 때 트리거됩니다.
• FocusLost - 위젯 외부의 영역을 클릭하거나 Tab 키를 누를 때 트리거됩니다.
이벤트 작업
텍스트 필드 위젯은 두 개의 바인딩 가능 이벤트를 트리거합니다.
• Changed - 문자가 추가되거나 제거될 때 트리거합니다.
• EnterKeyPressed - 사용자가 Enter 키를 누를 때 트리거합니다.
위젯 이벤트를 사용하면 위젯 내에서 함수, 데이터 서비스 또는 서비스를 트리거할 수 있습니다. 예를 들어, 이벤트를 유효성 검사기 함수에 바인딩하여 입력한 대로 또는 Enter 키를 누를 때 입력의 유효성을 검사할 수 있습니다.
읽기 전용 모드 사용
ReadOnly 속성을 사용하면 런타임에 텍스트가 변경되지 않도록 할 수 있습니다. 예를 들어, 이 속성을 사용하면 전환 버튼이 활성화되거나 매쉬업에서 확인란이 선택될 때까지 변경되지 않습니다. 읽기 전용이 사용되면 텍스트를 선택하고 복사할 수 있지만 현재 값을 편집, 잘라내기 또는 삭제할 수 없습니다. 읽기 전용 텍스트 필드의 텍스트 값을 변경하려면 디자인 타임에 Text 속성의 값을 입력합니다. 데이터 소스를 속성에 바인딩하여 런타임에 텍스트 값을 변경할 수도 있습니다.
문자 수 제한 설정
다음 방법 중 하나를 사용하면 텍스트 필드의 입력을 특정 문자 수로 제한할 수 있습니다.
• MaxNumberOfCharacters 속성을 임의의 숫자 값으로 설정합니다. 기본적으로 텍스트 필드는 최대 100자를 지원합니다.
• Mask 속성을 사용하여 마스크 패턴을 정의합니다. 패턴 내의 특수 문자 수는 문자 제한을 설정하는 데 사용됩니다.
텍스트 필드에 카운터 추가
텍스트 필드에 문자 수를 표시하는 카운터를 추가하려면 Counter 속성을 True로 설정합니다. MaxNumberOfCharacters 속성은 공백을 포함한 문자 제한을 설정하는 데 사용됩니다. 다음 이미지는 카운터가 표시되고 최대 문자 수가 10인 텍스트 필드 위젯을 보여줍니다.
문자 제한에 도달하면 카운터 색상이 변경됩니다.
텍스트 지우기 버튼 추가
ShowClearText 속성을 사용하면 위젯의 입력 상자에 텍스트 버튼을 추가할 수 있습니다. 입력 필드에 값이 포함되어 있으면 위젯 오른쪽에 버튼이 자동으로 표시됩니다. 이를 통해 사용자는 위젯 내에서 기존 텍스트를 빠르게 제거할 수 있습니다.
아이콘 추가
Icon 속성을 사용하여 텍스트 필드 내에 아이콘을 표시할 수 있습니다. 아이콘은 위젯의 왼쪽에 자동으로 나타납니다. 플랫폼에서 사용할 수 있도록 제공된 SVG 아이콘에서 아이콘을 선택할 수 있습니다. 이러한 아이콘에 대한 자세한 내용은 SVG 아이콘 사용을 참조하십시오.
텍스트 필드 입력 패턴 구성
Mask 속성을 사용하면 숫자, 영문자 및 영숫자 문자에 대한 입력 패턴을 지정할 수 있습니다. 패턴을 정의하면 입력 상자에 자리 표시자 가이드가 추가됩니다. 가이드는 사용자가 텍스트 필드에 입력할 수 있는 텍스트 패턴을 나타내는 데 사용되는 선입니다. 이 속성은 필수 패턴 외에도 텍스트 필드 내의 문자 수를 설정합니다. 다음과 같은 특수 문자를 사용하여 패턴을 생성할 수 있습니다.
• a - 영문자
• 9 - 숫자
• * - 영숫자
패턴을 생성하려면 필수 입력을 나타내는 문자열로 특수 문자를 결합합니다. 예를 들어, 다음 패턴은 여러 유형의 입력을 나타냅니다.
• 9999 - 4자리 숫자
• ***** - 5개의 영숫자 문자
• 99–aa - 두 자리 숫자 뒤에 구분 기호 대시와 두 개의 영문자가 옵니다.
다음 이미지는 런타임에 3자리 숫자가 4개 포함된 999–999–999–999 숫자 패턴에 대한 가이드를 보여줍니다.
패턴은 자릿수와 함께 숫자의 형식을 설정하는 데 사용됩니다. 이 예에서는 256120233234와 같은 12자리 숫자를 입력할 수 있습니다. 입력할 때 밑줄(_) 가이드는 숫자로 대체됩니다.
디자인 타임 동안 패턴 내에서 설정한 총 문자 수를 기준으로 표시기 가이드가 표시됩니다. 패턴보다 적은 자릿수를 입력하면 입력이 불완전하게 유지됩니다. 마스크를 사용하여 전화 번호 또는 우편 번호와 같은 특정 문자 수로 된 패턴을 정의해야 합니다. 입력이 특정 문자 수(예: 금액)가 아닌 경우 마스크를 사용하지 마십시오.
| | 마침표, 대시, 슬래시 등의 여러 기호 유형을 문자 간 구분 기호로 사용할 수 있습니다. |
| | 텍스트 필드 위젯은 플랫폼에서 표준 위젯으로, SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다. |
텍스트 필드 위젯의 속성은 다음과 같습니다.
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부 (Y/N) | 로컬리제이션 가능 여부 (Y/N) | ||
|---|---|---|---|---|---|---|---|
Text | 텍스트 필드에 표시되는 텍스트입니다. | STRING | 해당 없음 | Y | Y | ||
Label | 텍스트 필드의 레이블에 표시되는 텍스트입니다. | STRING | 해당 없음 | Y | Y | ||
Counter | 텍스트 필드에 입력되는 문자의 수를 세고 표시합니다. | BOOLEAN | False | N | N | ||
MaxNumberOfCharacters | 텍스트 필드의 최대 문자 수를 설정할 수 있습니다. | NUMBER | 100 | Y | N | ||
HintText | 필드에 입력해야 하는 내용에 대해 설명하는 자리 표시자 텍스트를 표시합니다. | STRING | 해당 없음 | N | Y | ||
Disabled | 이 속성을 사용하면 매쉬업에서 위젯을 비활성화할 수 있습니다. 위젯이 매쉬업에 표시되지만 클릭할 수는 없습니다. | BOOLEAN | False | Y | N | ||
ReadOnly | 텍스트 필드를 읽기 전용으로 설정하면 사용자가 텍스트를 편집할 수 없습니다. | BOOLEAN | False | N | N | ||
Password | 텍스트 필드 입력을 숨길 수 있습니다. | BOOLEAN | False | N | N | ||
ShowClearText | 텍스트 필드 안에 지우기 버튼을 추가하여 버튼을 클릭할 경우 실행 시간에 사용자가 필드의 텍스트를 지울 수 있습니다. | BOOLEAN | True | N | N | ||
LabelAlignment | 레이블을 왼쪽, 오른쪽 또는 가운데에 정렬할 수 있습니다. | STRING | 왼쪽 | N | N | ||
TextAlignment | 필드의 왼쪽 또는 오른쪽에 텍스트를 정렬할 수 있습니다. | STRING | 왼쪽 | N | N | ||
Mask | 텍스트 필드에 미리 정의된 문자를 설정할 수 있습니다. 속성 구성 필드에 알파벳 입력을 설정하려면 "a", 숫자 입력은 "9", 영숫자 입력은 "*"를 사용합니다. | STRING | 해당 없음 | N | N | ||
TabSequence | 사용자가 Tab 키를 누를 때 위젯이 강조 표시되는 순서입니다. | NUMBER | 해당 없음 | N | N | ||
CustomClass | 위젯의 최상위 div에 CSS를 정의할 수 있습니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다. | STRING | 해당 없음 | Y | N | ||
EnterKeyPressed | 텍스트 값을 편집하는 동안 Enter 키를 누를 때 트리거되는 이벤트입니다.
| 해당 없음 | 해당 없음 | Y | N | ||
FocusLost | 텍스트 값을 편집하는 동안 사용자가 Tab 키를 누르거나 위젯 외부의 영역을 클릭하여 포커스를 변경할 때 트리거되는 이벤트입니다. | 해당 없음 | 해당 없음 | Y | N | ||
Changed | 이 위젯의 데이터가 수정될 때 트리거되는 이벤트입니다. | 해당 없음 | 해당 없음 | Y | N | ||
ResetToDefaultValue | 이 위젯에 대한 입력을 기본값으로 재설정합니다. | 해당 없음 | 해당 없음 | Y | N | ||
Width | 위젯의 너비입니다. | NUMBER | 273 | N | N | ||
Height | 위젯의 높이입니다. 기본적으로 자동 계산됩니다. 텍스트 필드에 레이블을 포함하면 높이가 증가합니다. | NUMBER | 자동 크기 조정 | N | N | ||
TooltipField | 위젯을 마우스로 가리킬 때 표시되는 도구 설명 텍스트를 설정합니다. | STRING | 해당 없음 | Y | Y | ||
TooltipIcon | 위젯의 도구 설명에 대한 아이콘 이미지를 설정합니다. 이미지를 추가하거나 이미지 URL 경로를 지정할 수 있습니다. | 미디어 엔티티 | 해당 없음 | N | N | ||
Icon | 텍스트 상자 안에 표시할 아이콘을 지정합니다. | SVG 아이콘 목록 | 해당 없음 | N | N |
위젯 데이터 유효성 검사
공통 속성 외에도 MaxLength 및 MinLength 유효성 검사 속성을 사용하여 텍스트 필드 위젯 내 문자 수의 유효성을 검사할 수 있습니다.
MaxLengthFailureMessage 및 MinLengthFailureMessage 속성을 사용하여 기본 실패 메시지를 사용자 정의할 수 있습니다. ${value} 매개 변수를 사용하여 최대값 및 최대값이 메시지 내에 표시됩니다.
공통 유효성 검사 속성 사용에 대한 자세한 내용은 위젯에 유효성 검사 적용을 참조하십시오.
다음 표에는 유효성 검사 패널에서 사용할 수 있는 유효성 검사 속성이 나와 있습니다.
속성 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부(Y/N) | 로컬리제이션 가능 여부(Y/N) |
|---|---|---|---|---|---|
CriteriaMessage | 유효성 검사 조건 및 유효성 검사 실패 시 표시할 메시지입니다. | STRING | 해당 없음 | Y | Y |
CriteriaMessageDetails | 유효성 검사 조건 및 실패 메시지에 대해 표시할 세부 정보입니다. | STRING | 해당 없음 | Y | Y |
MaxLength | 텍스트 필드 값의 최대 길이입니다. | STRING | 해당 없음 | Y | N |
MaxLengthFailureMessage | 현재 값이 최대 문자 길이를 초과할 때 표시할 메시지입니다. | STRING | ${value} characters is the maximum | Y | Y |
MinLength | 텍스트 필드 값의 최소 길이입니다. | STRING | 해당 없음 | Y | N |
MinLengthFailureMessage | 현재 값이 최소 문자 길이 미만일 때 표시할 메시지입니다. | STRING | ${value} characters is the minimum | Y | Y |
RequiredMessage | 필수 값이 true로 설정되고 항목이 선택되지 않았을 때 표시할 메시지입니다. | STRING | 값은 필수입니다. | Y | Y |
ShowValidationCriteria | 텍스트 필드를 편집할 때 필수 입력에 대한 힌트 메시지를 표시합니다. | BOOLEAN | False | Y | N |
ShowValidationFailure | 입력한 값이 유효성 검사에 실패할 때 실패 메시지를 표시합니다. | BOOLEAN | False | Y | N |
ShowValidationSuccess | 입력한 값이 유효성 검사에 성공할 때 성공 메시지를 표시합니다. | BOOLEAN | False | Y | N |
SuccessMessage | 유효성 검사에 성공했을 때 표시할 메시지입니다. | STRING | 해당 없음 | Y | Y |
SuccessMessageDetails | 유효성 검사 성공 메시지에 관한 추가 정보를 표시하는 보조 메시지입니다. | STRING | 해당 없음 | Y | Y |
Validate | 위젯 값이 변경될 때 트리거되는 바인딩 가능한 이벤트입니다. 이 이벤트를 서비스 또는 함수에 바인딩하여 유효성 검사 패턴 또는 식을 적용합니다. | 이벤트입니다. | 해당 없음 | Y | N |
ValidationCriteriaIcon | 유효성 검사 조건에 대해 힌트 메시지 내에 표시할 SVG 아이콘을 설정합니다. | IMAGELINK | info | N | N |
ValidationFailureIcon | 유효성 검사에 실패했을 때 상태 메시지 내에 표시할 SVG 아이콘을 설정합니다. | IMAGELINK | error | N | N |
ValidationOutput | 위젯 유효성 검사의 출력을 검색합니다. 반환된 값은 Undefined, Unvalidated, Valid 또는 Invalid입니다. | STRING | 해당 없음 | Y | N |
ValidationState | 유효성 검사 상태를 설정하는 바인딩 가능한 속성입니다. 이 속성을 Undefined, Unvalidated, Valid 또는 Invalid로 설정할 수 있습니다. | STRING | Undefined | Y | N |
ValidationSuccessIcon | 유효성 검사에 성공했을 때 상태 메시지 내에 표시할 SVG 아이콘을 선택합니다. | IMAGELINK | success | N | N |
ValueRequired | 목록에서 항목을 선택해야 합니다. | BOOLEAN | False | Y | N |