How to make a keyboard in Roblox Studio

hello

unimportant things

i made this post
In roblox keyboard i made it
where i asked for feedback
you may use it as long as you make it your self
here you are going to make that

want a in roblox keyboard??
like this?
follow this tutorial to learn how to make it

other info (keycodes)

KeyCode
UserInputService:GetStringForKeyCode
keycodes are Enums that represent keys on a qwerty keyboard i use UserInputService:GetStringForKeyCode()
to Get the String For the KeyCode

1 gui

make a ScreenGui in StarterGui and add a Frame
set the name of the ScreenGui to KeyBoardGui
set the size of the Frame to UDim2.new(1,0,1,0)
set the BackgroundTransparency of the Frame to 1
set the name of the Frame to ScreenFrame
that is my main frame.

add a other frame in side it
the propertys to

add a UIGridLayout
and set its CellSize to UDim2.new(0.09, 0,0.19, 0)
set its CellPadding to UDim2.new(0.01, 0,0.01, 0)
the UIGridLayout is so we dont have to set every frame with mouse

1.1 local script in gui

add a local script in KeyBoard and inside the localscript do

script.Parent.Parent.Visible = false-- we dont see the gui
--this below is purely for look 
script.Parent.ChildAdded:Connect(function(child)
	if child.ClassName == 'TextButton' then
		child.Font = Enum.Font.GothamBold-- set the font can be any
	end
end)
-- load the frame
function load()
	-- add keycode
	local function addKeycode(ii,vv,color3)
		local clone = game.ReplicatedStorage.Q:Clone()--we get to this later
		local layoutOrder = ii+100-- the devhub says it is a good idea to do increments as little as 100
		clone.LayoutOrder = layoutOrder -- set the layoutOrder
		if layoutOrder > script.highestLayoutOrder.Value then script.highestLayoutOrder.Value = layoutOrder end--the int value highestLayoutOrder contains the highest LayoutOrder
		clone.BackgroundColor3 = color3 or Color3.new(1,1,1)--set the color3
		clone.Parent = script.Parent--set the parent
		wait()
		clone.Event:Fire(Enum.KeyCode[vv])--i did this this way fires the event which sets the Enum.KeyCode
	end
	local function addOther(layoutorder,name)--this adds special keys and is otherwise the same as addKeycode
		local layoutOrder = layoutorder+100
		if layoutOrder > script.highestLayoutOrder.Value then script.highestLayoutOrder.Value = layoutOrder end---
		local clone = game.ReplicatedStorage.Other:Clone()-- special keys clone an other thing
		clone.BackgroundColor3 = script.specialColor3.Value-- special keys have another color3
		clone.LayoutOrder = layoutOrder
		clone.Parent = script.Parent
		wait()
		clone.Event:Fire(name)--do not Enum.KeyCode[vv] as that  wont work
	end
	for i,v in ipairs(string.split(string.upper('qwertyuiopasdfghjklzxcvbnm'),'')) do--splits the string so we get the upper() lettersin a table 
		addKeycode(i+10,v,script.NormalColor3.Value)--adds the key
	end
	local function Return(...)--why did i did this
		return ...--this is so useless--this returns every aregument
	end
	addKeycode(2500 + 100+10,'Space',script.specialColor3.Value)-- the space key
	addKeycode(2700+10,Enum.KeyCode.Backspace.Name,script.specialColor3.Value)-- key space
	for i,v in ipairs(string.split(Return('One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Zero'),',')) do-- so work keycodes
		addKeycode(i,v,script.NumberColor3.Value)--numbers get another color3
	end
	--print(script.highestLayoutOrder.Value)
	addOther(script.highestLayoutOrder.Value,'Clear all')-- adds a key that clears all text
	addOther(script.highestLayoutOrder.Value,'Channge layout order')--a key that changes the keyboard layout from normal to alphabets
	Choose = script.Parent.Parent.ShowText.Choose-- the choose button not a key and normal keyboards say enter
end
load()--loads the keyboard
--
function ToEmptyString()--self explanatory right?
	script.Parent.Parent.ShowText.TextLabel.Text = ''
end
--script.Parent.Parent.Parent.destroyMe.Event.Event:Connect(ToEmptyString)--somthing
script.Parent.KeyClick.Event:Connect(function(keycode)--main event types the key when pressed
	local name
	--below is self explanatory right?
	if keycode == Enum.KeyCode.Backspace then
		name = keycode.Name
	elseif keycode == Enum.KeyCode.Space then
		name = ' '
		--handle special keys
	elseif type(keycode) == 'string' then
		--name = keycode
		local todo = keycode-- not sure why
		if todo == 'Clear all' then
			ToEmptyString()-- the clear add button
		elseif todo == 'Channge layout order' then
			script.IsLayoutOrder.Value = not script.IsLayoutOrder.Value
			local thing = {[true]=Enum.SortOrder.LayoutOrder,[false]=Enum.SortOrder.Name}
			script.Parent.UIGridLayout.SortOrder = thing[script.IsLayoutOrder.Value]
		end
	else
		--you know [GetStringForKeyCode](https://developer.roblox.com/en-us/api-reference/function/UserInputService/GetStringForKeyCode)
		name = game:GetService("UserInputService"):GetStringForKeyCode(keycode)
	end
	--
	if keycode == Enum.KeyCode.Backspace then-- removes 1 character on screen
		local text = script.Parent.Parent.ShowText.TextLabel.Text
		local thetable = string.split(text,'')
		table.remove(thetable,#thetable)
		script.Parent.Parent.ShowText.TextLabel.Text = table.concat(thetable)
	elseif type(keycode) == 'string' then -- do nothing
	else--whrites the key
		script.Parent.Parent.ShowText.TextLabel.Text = script.Parent.Parent.ShowText.TextLabel.Text..name
	end
end)
script.Parent.Parent.Visible = false-- we dont see the gui
script.Parent.Parent.Parent.StartKeyBoard.OnInvoke = function()--BindableFunction for easier programing
	script.Parent.Parent.Visible = true--we see the gui otherwise we cant press buttons
	script.Parent.Parent.ShowText.TextLabel.Text = ''--removes add characters
	Choose.MouseButton1Click:Wait()--fires when the user wants the text
	local text = script.Parent.Parent.ShowText.TextLabel.Text
	script.Parent.Parent.Visible = false
	script.Parent.Parent.ShowText.TextLabel.Text = ''
	return text--
end
script.Parent.Parent.Parent.Loaded:Fire()--say 'we are ready'
 

i added a comment that says what the line does
now add values the local script
2021-11-26 (1)

EnterColor3 is a color3value and has 255, 255, 0 as property - - for the enter button
IsLayoutOrder is a boolvalue and has true as property - - for changing the layout
NormalColor3 is a color3value and has 255, 255, 255 as property - - for every other button
NumberColor3 is a color3value and has 255, 0, 255 as property - - for the numbers buttons
highestLayoutOrder is a intvalue and has 0 as property - - self explanatory right?
specialColor3 is a color3value and has 0, 255, 255 as property - - for special buttons
the values with color3 in the name are for the keycolors

too bad I can’t use puns

now add a BindableEvent in keyboard the parent of the local script
and name it KeyClick
the explorer shouls look like
2021-11-26 (2)
this bindableEvent is for the keys to fire when the player presses a key

2 examples and ReplicatedStorage

because it is so tedious to lay every key your self i use examples
what i mean by that is 1 of it in ReplicatedStorage clone it and use it more than once

add a textbutton in ReplicatedStorage
set TextScaled to true
set Name to Q
in it add a BindableEvent in the textbutton and name it Event

why i named it Q i dont know
and because of the UIGridLayout from earlier i dont have to set propetys

add a localscript in the textbutton and do

photo1

or

photo2 with info of the steps

the first line Waits for the event to fire with the info
line 2 connect s the event and fires KeyClick when the user Click a Key
line 5 sets the name
line 7 sets str to the keycode
line 8 checks if keycode is a weird letter
line 9 sets the text to keycode.Name
line 11 sets text to that of line 7

yes you need to rewrite the code
not just ctrlc and ctrlv
now ctrlc and ctrlv what you made or use ctrld
ctrlc = copy, ctrlv = paste
and name it Other
in the textbutton named other do
2021-11-26 (4)

the first line Waits for the event to fire with the info
line 2 connect s the event and fires KeyClick when the user Click a Key
line 5 sets the name
line 6 sets the text
they should be

text button with name 'Q'

text button with name 'Other'

2021-11-26 (4)

only the localscripts need to be different

3 ServerScriptService only used to filter text

you can skip this if you want
you can add your own filter code

ServerScriptService

add a remotefunction in ReplicatedStorage and name it RemoteFilterStringAsync
in the first local script replace ‘return text’ with

game.ReplicatedStorage.RemoteFilterStringAsync:InvokeServer(text)--filter the text

add a script in ServerScriptService
and do

4 StarterGui

i have referenced other things in StarterGui that i have not mentioned yet so i do it now
add a BindableFunction in game.StarterGui.KeyBoardGui
set the name to StartKeyBoard
this is for easier starting
invoke this to start the keyboard
it returns what the user has typed
add a BindableEvent in game.StarterGui.KeyBoardGui
set the name to Loaded
when this fired the keyboard has loaded and StartKeyBoard can be invoked

4.1 game.StarterGui.KeyBoardGui.ScreenFrame

in game.StarterGui.KeyBoardGui.ScreenFrame add a Frame
set the properties accordingly

add a textlabel in ShowText
name it TextLabel
set the [bordermode,bordersizepixel] equal to above
set the size to {0.7, 0},{1, 0}
set TextScaled to true

add a textbutton and copy the settings from above [bordermode,bordersizepixel]
set the AnchorPoint to 1, 0
set TextScaled to true
set name to Choose
set position to {1, 0},{0, 0}
set Size to {0.3, 0},{1, 0}

5 end

invoke the BinableFunction

add a localscript and name it destroyMe
do in that script

script.Parent.Loaded.Event:Wait()-- wait until we are ready

while wait() do
	local text = script.Parent.StartKeyBoard:Invoke()--invoke the function
	print(text)
end

parent the localscript to the screen gui

if it really works you can run studio without errors
final restlt

final result

images from here
In roblox keyboard i made it

6 polls

hardest step?
  • 1
  • 1.1
  • 2
  • 3
  • 4
  • 4.1
  • 5
  • 6
  • none

0 voters

how easy was this?
  • this was easy to follow
  • this was normal to follow
  • this was hard to follow
  • HELP (this was too hard to follow)

0 voters

  • i did it. i build a in roblox keyboard
  • QIN2007 can you please publish this as a free model

0 voters

here
is
a
free
file

inrobloxkeyboard.rbxl (45.2 KB)

this is my first post in #resources:community-tutorials

3 Likes

If this is a community tutorial, wouldn’t you want to explain things immediately?

This tutorial is useful for beginners, but it doesn’t quite teach (it just tells)

1 Like

The title is wrong itself,
Name it: How to make a keyboard in Roblox Studio

Second:
Simpllify things, this is simple to make a keyboard without many of the things you told, this is a tutorial, so you should make it understandable by everyone, not to dump tons of paragraphs