title | description |
---|---|
Text Input |
Text input objects allow users to input text like fields on a form. |
A Class.TextBox
is a rectangle that allows a user to provide text input while it's in focus. When you script a Class.TextBox
, you can use it as a search bar or an input field on a form. To help users know what type of text they should input, you can also provide a prompt through the Class.TextBox.PlaceholderText|PlaceholderText
property, such as "Search..." or "Enter Name...".
Because these objects are Class.GuiObject|GuiObjects
, you can customize
properties such as Class.GuiObject.BackgroundColor3|BackgroundColor3
,
Class.GuiObject.BorderMode|BorderMode
,
Class.GuiObject.Transparency|Transparency
, and
Class.GuiObject.Rotation|Rotation
to fit the aesthetics of your experience.
A Class.TextBox
on a screen is useful for
things like an input field for a form.
To add a Class.TextBox
to a screen:
-
In the Explorer window, select StarterGui and add a ScreenGui.
-
Hover over StarterGui and click the ⊕ button. A contextual menu displays.
-
Insert a ScreenGui.
-
-
Select the new ScreenGui and add a TextBox.
-
Hover over ScreenGui and click the ⊕ button. A contextual menu displays.
-
Insert a TextBox.
-
To add a Class.TextBox
to the face of a part:
-
In the Explorer window, select StarterGui and add a SurfaceGui.
-
Hover over StarterGui and click the ⊕ button. A contextual menu displays.
-
Insert a ScreenGui.
-
-
Select the new SurfaceGui and add a TextBox.
-
Hover over SurfaceGui and click the ⊕ button. A contextual menu displays.
-
Insert a TextBox.
-
-
Adorn the SurfaceGui to the part on which you want to display the TextBox.
-
In the Properties window, select the Adornee property. Your cursor changes.
-
In the Explorer window, select the part.
-
Like buttons, you can script any action for a Class.TextBox
object to perform when a user interacts with it. For example, the following script connects to the Class.TextBox.FocusLost|FocusLost
event, which fires when the user presses the Enter button or clicks outside the Class.TextBox
. The script prints the contents of the box to the Output window when the event fires:
local textBox = script.Parent
local function onFocusLost(enterPressed, inputObject)
if enterPressed then
print(textBox.Text)
end
end
textBox.FocusLost:Connect(onFocusLost)
As another example, you might want to only allow numbers in a Class.TextBox
. The following code uses the Class.TextBox.GetPropertyChangedSignal
event to detect when the Class.TextBox.Text
changes, such as when a user starts typing. Then it uses the Library.string.gsub()
function to disallow non-numbers:
local textBox = script.Parent
local function onlyAllowNumbers()
textBox.Text = string.gsub(textBox.Text, "%D", "")
end
textBox:GetPropertyChangedSignal("Text"):Connect(onlyAllowNumbers)