sample text box input

Here’s an example of entering text in boxes. I tried to make it as small as I could. Hope I added enough comments. Tap a box and enter text. The text shows in the boxes and I also put the text on the screen. Pressing Return isn’t required, but will hide the keyboard if pressed.


displayMode(FULLSCREEN)
supportedOrientations(LANDSCAPE_ANY)

function setup()
    --showKeyboard()
    inputTab={} -- input table
    -- create 4 input areas  x,y,w,h,text
    table.insert(inputTab,input(150,700,200,30,"Name"))  
    table.insert(inputTab,input(150,610,200,30,"Address"))  
    table.insert(inputTab,input(150,520,200,30,"City State"))  
    table.insert(inputTab,input(150,430,130,30,"Phone number")) 
end

function draw()
    background(40,40,50)
    text("Tap a box to select the input area.",WIDTH/2,500)
    text("Key data. Return can be pressed, but it's not required.",WIDTH/2,470)
    text("Pressing Return hides the keyboard.",WIDTH/2,440)
    for nbr,box in pairs(inputTab) do    -- draw boxes and text
        box:draw()  -- draw box and text in each box
        text(box.val,WIDTH/2,HEIGHT-50-nbr*25)  -- draw text on the screen (not required)
    end
end

function touched(t)    -- check which box is selected
    for nbr,box in pairs(inputTab) do
        if box:touched(t) then  -- box touched
            return  -- exit function
        end
    end  
end

input=class()

function input:init(x,y,w,h,txt)
    self.x=x    -- x position
    self.y=y    -- y position
    self.w=w    -- width
    self.h=h    -- height
    self.txt=txt -- text to show on box
    self.val=""   -- data keyed in box
    self.sel=false  -- box selected true/false
end

function input:draw()
    rectMode(CORNER)
    textMode(CORNER)
    if self.sel then    -- box is selected
        if keyboardBuffer() ~= nil then -- something in buffer
            self.val=keyboardBuffer()    -- get keyed text
            len=self.val:len()   -- length of keyed data
            if string.sub(self.val,len)==RETURN then    -- remove return value if pressed
                self.val=string.sub(self.val,1,len-1)    -- save keyed text
                self.sel=false  -- deselect the box
                hideKeyboard()
            end
        end
    end
    fill(0)    -- set background for box
    if self.sel then    -- set selected color for box
        fill(85, 121, 125, 255)
    end
    stroke(255)    -- box outline color
    strokeWidth(2)    -- outline size
    rect(self.x,self.y,self.w,self.h)  -- draw box
    fill(255)    -- set text color
    text(self.txt,self.x,self.y+self.h)    -- box name
    text(self.val,self.x+4,self.y+4)    -- box text
end

function input:touched(t)
    if t.state==BEGAN then
        for z=1,#inputTab do    -- clear selected flag for all boxes
            inputTab[z].sel=false
        end
        -- check which box was selected
        if t.x>self.x and t.x<self.x+self.w and t.y>self.y and t.y<self.y+self.h then
            hideKeyboard()
            showKeyboard()    -- hide/show keyboard clears the keyboard buffer area
            self.val=""       -- clear val
            self.sel=true     -- set selected flag
            return true       -- box was selected
        end
    end 
    return false    -- no box was selected
end