TextInput 구성 요소 사용

TextInput 구성 요소는 기본 ActionScript TextField 객체의 래퍼인 단일 행 텍스트 구성 요소입니다. 여러 행으로 된 텍스트 필드가 필요하면 TextArea 구성 요소를 사용합니다. 예를 들어, 양식에서 TextInput 구성 요소를 암호 필드로 사용할 수 있습니다. 이 경우 사용자가 Tab 키를 눌러 필드 밖으로 이동할 때 필드의 문자 수가 충분한지 확인하는 리스너를 설정할 수 있습니다. 이 리스너는 필드의 문자 수가 충분하지 않은 경우에 해당 필드에 적절한 수의 문자를 입력해야 한다는 오류 메시지를 표시합니다.

TextInput 인스턴스에 나타나는 텍스트의 속성을 변경하는 setStyle() 메서드를 사용하여 textFormat 속성을 설정할 수 있습니다. TextInput 구성 요소에는 텍스트를 숨기는 암호 필드 또는 HTML 형식을 설정할 수 있습니다.

TextInput 구성 요소와 사용자의 상호 작용

응용 프로그램 내에서 TextInput 구성 요소를 활성화하거나 비활성화할 수 있습니다. 비활성화된 상태에서 TextInput은 마우스 또는 키보드 입력을 수신하지 못합니다. 활성화된 상태에서는 ActionScript TextField 객체와 마찬가지로 포커스, 선택 및 탐색 규칙을 따릅니다. TextInput 인스턴스에 포커스가 있으면 다음 키를 사용하여 해당 인스턴스를 제어할 수 있습니다.

키

설명

화살표 키

삽입점을 왼쪽 또는 오른쪽으로 한 문자씩 이동합니다.

Shift+Tab

이전 객체로 포커스를 이동합니다.

탭

다음 객체로 포커스를 이동합니다.

포커스 제어에 대한 자세한 내용은 Flash Professional용 ActionScript 3.0 참조 설명서 의 FocusManager 클래스 및 FocusManager를 사용한 작업 을 참조하십시오.

각 TextInput 인스턴스의 실시간 미리 보기에는 제작하는 동안 속성 관리자나 [구성 요소 관리자]에서 변경한 매개 변수가 반영됩니다. 실시간 미리 보기에서는 텍스트를 선택할 수 없으며 스테이지에서 구성 요소 인스턴스에 텍스트를 입력할 수도 없습니다.

응용 프로그램에 TextInput 구성 요소를 추가할 때는 [액세스 가능성] 패널을 사용하여 화면 판독기에서 해당 구성 요소에 액세스할 수 있도록 만들 수 있습니다.

TextInput 구성 요소 매개 변수

속성 관리자나 구성 요소 관리자에서 각 TextInput 구성 요소 인스턴스에 대해 editable , displayAsPassword , maxChars , restrict , text 등의 제작 매개 변수를 설정할 수 있습니다. 이러한 매개 변수에는 각각 같은 이름의 해당 ActionScript 속성이 있습니다. 이러한 매개 변수의 가능한 값에 대한 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 TextInput 클래스를 참조하십시오.

ActionScript를 작성하면 속성, 메서드 및 이벤트를 사용하여 TextInput 구성 요소에 대한 이러한 옵션 및 추가 옵션을 제어할 수 있습니다. 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 TextInput 클래스를 참조하십시오.

TextInput 구성 요소를 사용하여 응용 프로그램 만들기

다음 절차에서는 응용 프로그램에 TextInput 구성 요소를 추가하는 방법을 설명합니다. 이 예제에서는 두 개의 TextInput 필드를 사용하여 암호를 입력하고 확인합니다. 또한 이벤트 리스너를 사용하여 최소 8자가 입력되었는지, 두 필드의 텍스트가 일치하는지 확인합니다.

  1. 새 Flash(ActionScript 3.0) 문서를 만듭니다.

  2. [구성 요소] 패널의 Label 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 지정합니다.

    • 인스턴스 이름으로 pwdLabel 을 입력합니다.

    • W 값으로 100 을 입력합니다.

    • X 값으로 50 을 입력합니다.

    • Y 값으로 150 을 입력합니다.

    • [매개 변수] 섹션에서 text 매개 변수 값으로 Password: 를 입력합니다.

  3. [구성 요소] 패널에서 두 번째 Label 구성 요소를 스테이지로 드래그하고 다음 값을 지정합니다.

    • 인스턴스 이름으로 confirmLabel 을 입력합니다.

    • W 값으로 100 을 입력합니다.

    • X 값으로 50 을 입력합니다.

    • Y 값으로 200 을 입력합니다.

    • [매개 변수] 섹션에서 text 매개 변수 값으로 Confirm Password: 를 입력합니다.

  4. [구성 요소] 패널의 TextInput 구성 요소를 스테이지로 드래그하고 다음 값을 지정합니다.

    • 인스턴스 이름으로 pwdTi 를 입력합니다.

    • W 값으로 150 을 입력합니다.

    • X 값으로 190 을 입력합니다.

    • Y 값으로 150 을 입력합니다.

    • [매개 변수] 섹션에서 displayAsPassword 매개 변수의 값을 두 번 클릭하고 true 를 선택합니다. 이렇게 하면 텍스트 필드에 입력한 값이 별표로 가려집니다.

  5. [구성 요소] 패널의 TextInput 구성 요소를 스테이지로 드래그하고 다음 값을 지정합니다.

    • 인스턴스 이름으로 confirmTi 를 입력합니다.

    • W 값으로 150 을 입력합니다.

    • X 값으로 190 을 입력합니다.

    • Y 값으로 200 을 입력합니다.

    • [매개 변수] 섹션에서 displayA s Password 매개 변수의 값을 두 번 클릭하고 true 를 선택합니다. 이렇게 하면 텍스트 필드에 입력한 값이 별표로 가려집니다.

  6. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 

    function tiListener(evt_obj:Event){ 
if(confirmTi.text != pwdTi.text || confirmTi.length < 8) 
{ 
        trace("Password is incorrect. Please reenter it."); 
}  
else { 
        trace("Your password is: " + confirmTi.text); 
} 
} 
confirmTi.addEventListener("enter", tiListener);

    이 코드는 confirmTi 라는 TextInput 인스턴스에 enter 이벤트 핸들러를 설정합니다. 두 매개 변수가 일치하지 않거나 사용자가 8자 미만의 문자를 입력하면 "Password is incorrect. Please reenter it."이라는 메시지가 표시됩니다. 암호가 8자 이상이고 서로 일치하면 [출력] 패널에 입력한 값이 표시됩니다.

  7. [컨트롤] > [무비 테스트]를 선택합니다.

ActionScript를 사용하여 TextInput 인스턴스 만들기

다음 예제에서는 ActionScript를 사용하여 TextInput 구성 요소를 만듭니다. 또한 사용자에게 이름을 입력하라고 알리는 데 사용할 프롬프트 Label을 만들고 대문자와 소문자, 마침표 및 공백만 입력할 수 있도록 구성 요소의 restrict 속성을 설정합니다. Label 구성 요소와 TextInput 구성 요소에 텍스트 서식을 지정하는 데 사용되는 TextFormat 객체도 만듭니다.

  1. 새 Flash(ActionScript 3.0) 문서를 만듭니다.

  2. [구성 요소] 패널의 TextInput 구성 요소를 [라이브러리] 패널로 드래그합니다.

  3. [구성 요소] 패널의 Label 구성 요소를 [라이브러리] 패널로 드래그합니다.

  4. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 

    import fl.controls.Label; 
import fl.controls.TextInput; 
 
var nameLabel:Label = new Label(); 
var nameTi:TextInput = new TextInput(); 
var tf:TextFormat = new TextFormat(); 
 
addChild(nameLabel); 
addChild(nameTi); 
 
nameTi.restrict = "A-Z .a-z"; 
 
tf.font = "Georgia"; 
tf.color = 0x0000CC; 
tf.size = 16; 
 
nameLabel.text = "Name: " ; 
nameLabel.setSize(50, 25); 
nameLabel.move(100,100); 
nameLabel.setStyle("textFormat", tf); 
nameTi.move(160, 100); 
nameTi.setSize(200, 25); 
nameTi.setStyle("textFormat", tf);

  5. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.