4 # Text Field {#text-field}
8 The Dali::Toolkit::TextField is a control which provides a single-line editable text field.
12 Before any text has been entered, the TextField can display some placeholder text.
13 An alternative placeholder can be displayed when the TextField has keyboard focus.
14 For example a TextField used to enter a username could initially show "Unknown Name", and then show "Enter Name." when the cursor is shown.
19 TextField field = TextField::New();
20 field.SetProperty( TextField::Property::PLACEHOLDER_TEXT, "Unnamed Name" );
21 field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_FOCUSED, "Enter Name." );
23 Stage::GetCurrent().Add( field );
29 var field = new dali.TextField();
30 field.placeholderText = "Unnamed Name";
31 field.placeholderTextFocused = "Enter Name.";
33 dali.stage.add( field );
36 When the TextField is tapped, it will automatically gain the keyboard focus. Key events will then result in text being inserted, and the placeholder text will be removed.
37 After text has been entered, it can be retrieved from the TEXT property.
42 Property::Value fieldText = field.GetProperty( TextField::Property::TEXT );
43 std::cout << "Received text: " << fieldText.Get< std::string >() << std::endl;
49 console.log( field.text );
54 By default TextField will automatically select a suitable font from the platform. However, a different font could be selected. See the [Font Selection](@ref font-selection) section for more details.
58 TextField displays a single-line of text, which will scroll if there is not enough room for the text displayed.
59 If there is enough room, then the text can be aligned horizontally to the beginning, end, or center of the available area:
64 field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
70 field.HorizontalAlignment = "BEGIN"; // "CENTER" or "END"
73 ### TextField Decorations
77 To change the color of the text, the recommended way is to use the TEXT_COLOR property.
78 An alternative color can be used for placeholder text by setting PLACEHOLDER_TEXT_COLOR.
79 Note that unlike the Actor::COLOR property, these properties will not affect child Actors added to the TextField.
83 field.SetProperty( TextField::Property::TEXT_COLOR, Color::CYAN );
84 field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK );
90 field.textColor = dali.COLOR_CYAN;
91 field.placeholderTextColor = dali.COLOR_BLACK;
94 ### Text Field Properties
96 Name (JavaScript) | Name (C++) | Type | Writable | Animatable
97 -----------------------------------|--------------------------------------|--------------|--------------|-----------
98 renderingBackend | RENDERING_BACKEND | INTEGER | O | X
99 text | TEXT | STRING | O | X
100 placeholderText | PLACEHOLDER_TEXT | STRING | O | X
101 placeholderTextFocused | PLACEHOLDER_TEXT_FOCUSED | STRING | O | X
102 fontFamily | FONT_FAMILY | STRING | O | X
103 fontStyle | FONT_STYLE | STRING | O | X
104 pointSize | POINT_SIZE | FLOAT | O | X
105 maxLength | MAX_LENGTH | INTEGER | O | X
106 exceedPolicy | EXCEED_POLICY | INTEGER | O | X
107 horizontalAlignment | HORIZONTAL_ALIGNMENT | STRING | O | X
108 verticalAlignment | VERTICAL_ALIGNMENT | STRING | O | X
109 textColor | TEXT_COLOR | VECTOR4 | O | X
110 shadowOffset | SHADOW_OFFSET | VECTOR2 | O | X
111 shadowColor | SHADOW_COLOR | VECTOR4 | O | X
112 primaryCursorColor | PRIMARY_CURSOR_COLOR | VECTOR4 | O | X
113 secondaryCursorColor | SECONDARY_CURSOR_COLOR | VECTOR4 | O | X
114 enableCursorBlink | ENABLE_CURSOR_BLINK | BOOLEAN | O | X
115 cursorBlinkInterval | CURSOR_BLINK_INTERVAL | FLOAT | O | X
116 cursorBlinkDuration | CURSOR_BLINK_DURATION | FLOAT | O | X
117 grabHandleImage | GRAB_HANDLE_IMAGE | STRING | O | X
118 grabHandlePressedImage | GRAB_HANDLE_PRESSED_IMAGE | STRING | O | X
119 scrollThreshold | SCROLL_THRESHOLD | FLOAT | O | X
120 scrollSpreed | SCROLL_SPEED | FLOAT | O | X
121 selectionHandleImageLeft | SELECTION_HANDLE_IMAGE_LEFT | STRING | O | X
122 selectionHandleImageRight | SELECTION_HANDLE_IMAGE_RIGHT | STRING | O | X
123 selectionHandlePressedImageLeft | SELECTION_HANDLE_PRESSED_IMAGE_LEFT | STRING | O | X
124 selectionHandlePressedImageRight | SELECTION_HANDLE_PRESSED_IMAGE_RIGHT | STRING | O | X
125 selectionHighlightColor | SELECTION_HIGHLIGHT_COLOR | VECTOR4 | O | X
126 decorationBoundingBox | DECORATION_BOUNDING_BOX | RECTANGLE | O | X
127 inputMethodSettings | INPUT_METHOD_SETTINGS | MAP | O | X