iPhone-Style Password Inputs with Appcelerator Titanium

By  on  
iPhone Password Mask

Most mobile applications ask you for your credential so that they may verify your account and pull information via an API.  My mobile application is no different.  The problem I ran into was that I couldn't find the method by which to emulate the iPhone's password field behavior.  Luckily a quick search gave me the answer:

// Create the text field
var formElement = Titanium.UI.createTextField({
	value: "",
	width: 100,
	height: "auto",
	hintText: "Password",
	passwordMask: true
});

Setting the passwordMask property to true provides the true iPhone-style password masking that I desired.  Now all but the last letter in the password are properly hidden!

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

  • By
    MooTools Gone Wild: Element Flashing

    If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...

Discussion

  1. Good, that was what I search and arrive here ;)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!