Creating a Password Field

Learn how to create a password entry field using a a custom font and start using font. You can download the PasswordEntry.ttf font here.

The Goal

Password entry fields require that you mask the text in the field so it cannot be read or copied from the field. The easiest way to mask the text in a field is to use a font that draws all characters as bullets. This allows you to still access the text property of the field in order to get the actual password but the user only sees bullets.

Loading The Font

LiveCode enables a developer to load a font at runtime using start using font. The code below shows how you can load the PasswordEntry.ttf font file that resides in the same directory as a stack file.

on preOpenStack
   set the itemdelimiter to slash
   put the effective filename of this stack into theFontFile
   delete the last item of theFontFile
   put theFontFile & "/PasswordEntry.ttf" into theFontFile
   start using font file theFontFile
   put the result into theError
   
   if theError is not empty then
      answer "Error loading password font:" && theError & "."
   end if
end preOpenStack
Click to copy

After adding this code to your card script, trigger it so that the font is loaded into the LiveCode IDE. If the stack is the topmost stack then run this in the message box:

dispatch "preOpenStack" to this card of this stack

Assign Font To Field

Now that you are loading the font you can assign it as the textFont of the password field. The name of the font is PasswordEntry. Select the font from the mneu or manually type PasswordEntry into the Font field using the Property Inspector.

Filter Input and Don't Allow Copy/Cut

The last thing to do is write some code that prohibits cut/copy and filters input. This example allows characters between ascii numbers 33 and 126. Just put the code in the script of the password field.

on rawKeyDown pKeyCode
   ## Keypad keycodes for 0 - 9
   put "65456,65457,65458,65459,65460,65461,65462,65463,65464,65465" into theKeyPadKeyCodes
   put "65361,65362,65363,65364" into theArrowKeys
   put 65288 into theDeleteKeyCode
   put 65535 into theBackspaceKeyCode
   put 65289 into theTabKeyCode
   put 65293 into theReturnKeyCode
   put "65505,65513" into theModifierKeys # shift, alt/option, 
   put 97 into theAKeyCode
   put 118 into thePasteKey
   
   put the commandkey is "up" and the shiftkey is "up" and the altkey is "up" into noModifiersAreDown
   put the commandkey is "down" and the shiftkey is "up" and the altkey is "up" into commandModifierIsDown
   set the wholematches to true
   
   if pKeyCode is among the items of theArrowKeys then
      pass rawKeyDown
   else if noModifiersAreDown and pKeyCode is among the items of theKeyPadKeyCodes then
      pass rawkeydown
   else if noModifiersAreDown and (pKeyCode is theTabKeyCode or pKeyCode is theReturnKeyCode) then
      pass rawkeydown
   else if pKeyCode is thePasteKey and commandModifierIsDown then ## paste
      pass rawkeydown
   else if pKeyCode is theAKeyCode and commandModifierIsDown then ## select all
      pass rawkeydown
   else if (pKeyCode >= 33 and pKeyCode <= 126 or \
          pKeyCode is theDeleteKeyCode or pKeyCode is theBackspaceKeyCode) and \
          (the commandkey is "up") then
      pass rawkeydown
   else if pKeyCode is not among the items of theModifierKeys then ## Shiftkey sends msg on Windows, not Mac
      beep
   end if
end rawKeyDown

on cutKey
   
end cutKey

on copyKey
   
end copyKey
Click to copy

15 Comments

Ivar Andreassen

Hello,

Thank you for supplying the sample code and link to the .ttf. There is just one small error in your initial code and it should be updated for others:

http://docs.runrev.com/Command/revFontLoad --> "If the font was loaded successfully, the revFontLoad command puts empty into the result. If the font failed to load or invalid parameters were given, the result will contain an error string. "

The error handling code needs to be changed from: "if theError is empty then" to "if theError is not empty then"

The final thing to adjust is that adding "Password Entry" will not work (the default / previous font will be selected after moving away from the property).

I did this to make it work:
1) Added the correct code above (Selecting Object -> Stack Script) and copy-paste your code
2) Ran the code (green button)
3) No font visible?
4) Saved the stack / card and exit.
5) Open (no error thrown by the loading of font), then I could select "PasswordEntry" from the text field.

Thanks & regards
IA

Trevor DeVore

@Ivar - thanks for the feedback. I've updated the article to fix errors and make it current with LC 8.

Roberto

You did not mention if this works for mobile too. Will it load the font?
If I may suggest, it would also be nice to have a date on top of the article, so that we know how recent the lesson/tutorial is.
Thanks

Roberto

One more thing.
What is the advantage of loading a font when you can use a "Bullet" char, using this instead of passing the rawkey
on TypeAchar
lock messages
type "•" --bullet char
put the text of me into sThePassword
unlock messages
end TypeAchar
Off course you got to fix the delete char and save the password field each time into a var

Ebillson GRAND JEAN

Hi Trevor, how do I add functionality that allows to hide or see password whenever the user wants? Thanks

Trevor DeVore

@Roberto - The LiveCode dictionary says that `start using font` works on desktop. I think people have used it on mobile though. I haven't tried the script on mobile.

Regarding bullet char - I've never cared for replacing text that is typed with a bullet char and not being able to use the text property of the field to get what the user typed. Historically it wasn't possible to do this cleanly without using rawKeyDown and inserting the characters manually. The character the user typed would sometimes appear before you swapped it out. Now that the engine has the textChanged message you could probably use it to swap the bullet character in. With a custom font I also have precise control over the look of the bullet.

Trevor DeVore

@Ebillson - Just change the textFont of the field to a standard font to show what the user typed. Change it back to the PasswordEntry font when you want to hide it.

Ebillson GRAND JEAN

I actually have no idea how to script it. More over when I do so if I add some hint in the field the hint is transformed in dots too. So I have two issues

Trevor DeVore

You can change the font used by a field by setting the textFont property.

set the textFont of field "MyPasswordField" to "Helvetica"
set the textFont of field "MyPasswordField" to "PasswordEntry"

For the hint, one possibility is to start with the font sent to something like "Helvetica" and displaying the hint. Then in the openField message that is sent to the field you could change the font to "PasswordEntry" and clear out the hint. For a more detailed discussion about dealing with the hint I would suggest posting in the LiveCode forums or the mailing list.

Ebillson GRAND JEAN

Thanks Trevor

Ebillson GRAND JEAN

Hi Trevor I have adapted the font choices, now I am testing the code on android and it gives an error because the font is not loaded, it says : "Error loading password font : Can't load font file". What should I do about that?

Trevor DeVore

@Ebillson - I don't develop on Android so I'm not sure. You might ask on the LiveCode forums to see if anybody else has tried loading fonts on Android.

fanny

hi trevor,
i tried implementing this method but I could seem to download the PasswordEntry.ttf font.
Is this still possible?
I haven't found another good way to this.

thanks in advance.

Trevor DeVore

@fanny - I just downloaded the font using the link in the introduction and it worked. Please try downloading again.

fanny

Sorry for the late answer, but yes now I could download it, thanks!

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.