Mobile web - hidden numerical input
Hi I am writing a web app (mainly iphone targeted) where the user has to enter their dob as part of the log in, I need this to be <input type = 'password'
however I also want to enable the numeric section of the keyboard. I would usually change the type attr to 'number' however as this needs to be hidd开发者_如何转开发en I wondered if there was another way to activate the numeric pad
Cheers!
(ps I do not want to use any frameworks such as jquery on this)
I know this will probably not help the original poster (as I'm using my super necroposting powers) but here's how I've dealt with the problem (creating a field which has both password masking AND calls the numeric keyboard), for future generations' sake:
The answer is very simple:
First of all, fetch yourself a masking font (one that displays all characters as "●").
Create yourself a CSS font-face which uses that font.
Create an input with the "tel" type () and apply the font-face to it.
So basically, it is not really a password field, but a regular input field using a font that displays all characters as "●".
Here's a usable font for that matter: http://www.director-online.com/dougwiki/index.php?title=Password_Font_(ttf)
Cheers!
The keyboard type is fired based on the input type. There's currently no other way to force the keyboard type to use.
That makes much more sense :-)
I've found an (older) article an this, where the iPhone uses the numeric keyboard, if the name of the element contains: zip
or phone
:
http://www.bennadel.com/blog/1197-Defaulting-To-The-Numeric-Keyboard-On-The-iPhone.htm
I have no idea if that still works and if it's true for password fields, but try naming your field "birthday_zip"
, or something similar, and see if it works.
精彩评论