Linking Multiple Text Entry Fields

January 17, 2001
by Gary Rosenzweig

Have you ever seen a set of text entry fields that are linked together so the user can just type right from one to the other? You might see this done for fields that let the user type a product serial number, a telephone number, or even a zip+4 code. If you are still not sure what I am talking about, check out this week's example movie below.

These are just three regular text members set to editable and tab to next item. However, I have added Lingo code so that the insertion point immediately follows from one text member to the next after the maximum number of characters have been entered. I've also customized the fields so that only numerical digits can be entered, three in the first two boxes, and four in the last. The behavior I wrote to do this follows. The comments explain each section of code.

I've allowed for customization, so numbers, letters, or additional characters can be specified. The getPropertyDescriptionList handler also determines how many characters will be allowed in the text member sprite.

property s
property pMaxChars
property pAllowNumbers
property pAllowLetters
property pAlsoAllow

on getPropertyDescriptionList me

  list = [:]
  addProp list, #pMaxChars, [#comment: "Maximum Number of Characters", #format: #integer, #default: 3]
  addProp list, #pAllowNumbers, [#comment: "Allow Numbers", #format: #boolean, #default: TRUE]
  addProp list, #pAllowLetters, [#comment: "Allow Letters", #format: #boolean, #default: TRUE]
  addProp list, #pAlsoAllow, [#comment: "Also Allow", #format: #string, #default: ""]
  return list

end

on beginSprite me

s = me.spriteNum
sprite(s).member.text = ""

end

on keyDown me

ok = FALSE

  -- check to see if it is a number
  if pAllowNumbers then
    if "0123456789" contains the key then
      ok = TRUE
    end if
  end if

  -- check to see if it is a letter
  if pAllowLetters then
    if "ABCDEFGHIJKLMNOPQRSTUVWXYZ" contains the key then
      ok = TRUE
    end if
  end if

  -- see if it is another type of character
  if pAlsoAllow contains the key then
    ok = TRUE
  end if

  -- whatever happens, don't exceed max char
  if sprite(me.spriteNum).member.text.length >= pMaxChars then
    ok = FALSE
  end if

  -- pass teh characer if it is allowed
  if ok then
    pass

    -- see if the backspace should be passed
  else if the key = BACKSPACE then

    if sprite(s).member.text.length = 0 then
      -- if this is the beginning of this member, then backspace to
      -- the previous member and delete the last character
      if sprite(me.spriteNum-1).member.type = #text then
        the keyboardFocusSprite = me.spriteNum - 1
        textmem = sprite(s-1).member
        textmem.text = textmem.text.char[1..textmem.text.length-1]
        stopEvent
      end if
    else
      -- this is a normal backspace
      pass
    end if

  else if the key = TAB then
    -- allow the user to tab, too
    pass

  else
    -- stop all other characters
    stopEvent
  end if

end

on keyUp me

  -- see if it is time to go to the next text member sprite
  if sprite(me.spriteNum).member.text.length >= pMaxChars then
    the keyboardFocusSprite = me.spriteNum + 1
  end if

end

To use this code to link together text members, you need to place it on each of the text member sprites. Then, you need to make sure that they are in consecutive sprite channels. Check the example movie if you want to see how it fits together. I know this isn't the most exciting piece of code, but it can serve a purpose in the right application. It will certainly help a confused user to enter the right type of data.

A sample Director 8 movie is available for download in Mac or Windows format.

Gary Rosenzweig's two most recent books are:

"Special Edition Using Director 8" -- The most comprehensive guide to Director ever, including tons of examples and demo movies. It's suitable for novices and experts alike.
"Advanced Lingo for Games" -- How to make games with Director 7 and 8. This book comes complete with full source code for more than 20 complete games.

More information about these books can be found at http://clevermedia.com/resources/bookstore/. They can be purchased there, or in your local bookstore.

Gary Rosenzweig is the Chief Engineer, founder, and owner of CleverMedia, a game and multimedia development company in Denver, Colorado. He is the author of ten books on Macromedia Director and Flash, including his latest, Special Edition Using Director MX.