Text Entry Behavior

January 16, 2000
by Pat McClellan

Dear Multimedia Handyman,

I was hoping you can help me out. I have a fixed size text field that is editable so users can type in their name. I want to limit the field so that users can only type in 15 characters. But once this 15 character limit is reached, they should still be able to highlight a section and delete or edit their entry. I'm having a tough time doing this and was hoping you might have some pointers.

Steve

Dear Steve,

User text input is one of the most useful interactive functions. But as you've seen, there are times when you want to impose some constraints, such as how many and which characters (chars) to allow. So, let's proceed on the assumption that our behavior will allow us to specify which keys and how many chars will be accepted. So when we drop the behavior on a field or text member sprite, this should appear:

Let's call the number of chars allowed "pCharLimit", and our property for the keys allowed will be "pCharsAllowed". Now we just need to figure out what to do with those properties, and more critically, when to do it. With text or field sprites, the most useful events are when the user presses a key down (keyDown) and when the user releases the key (keyUp). So which should we use when? Remember that the instruction to add the letter to the field happens on keyDown.

Let's say for another application that you wanted to evaluate what the user has entered; maybe you're checking the user's password. In this case, you don't want to evaluate what the user has entered until after that letter has been added. So you'd need to use keyUp. However, in our case, we want to check to see which letter the user has entered, and how many chars have already been entered before we pass it on to be added to the field or text member. So we'll want to use keyDown.

When the user presses a key down, we need to see if the key is included in the string of characters we entered for pCharsAllowed. For that, we can simply use the "contains" function. If the key is contained in the string, then we can move on. Next we need to check to see if we have already reached the pCharLimit. If the current number of chars in the field or text member is less than pCharLimit, then we can allow the key input event to pass.

The only other thing to consider is that there are some special keys we'll want to allow to pass -- even if the pCharLimit has been reached. Those keys include RETURN, ENTER, TAB and BACKSPACE.

Here's the demo, in which I have set different parameters for the three text entry sprites. Note that the behavior works equally well on fields and antialiased text members.

A sample movie is available for download in Mac or PC format. This is a D7 movie.

And here's the complete behavior which is dropped on the field or text sprite.

-- charLimiter Behavior
-- copyright © MM, ZZP Online LLC
-- free use for Director Online readers
property pCharLimit, pCharsAllowed
on getPropertyDescriptionList me
  pdlist = [:]
  addprop pdlist, #pCharLimit, [#comment:"How many ¬
    chars?", #format:#integer, #default:10]
  addprop pdlist, #pCharsAllowed, [#comment:"Which ¬
    chars allowed?", #format:#string, ¬
    #default:"abcdefghijklmnopqrstuvwxyz "]
  return pdlist
end getPropertyDescriptionList
on keyDown me
  if pCharsAllowed contains the key then
    currentChars = sprite(me.spriteNum).member.text.char.count
    if currentChars < pCharLimit then 
      pass
    end if
  else
    case the key of
      RETURN, ENTER, BACKSPACE, TAB: pass
    end case
  end if
end

Good luck with your program.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.