开发者

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:

  1. First of all, fetch yourself a masking font (one that displays all characters as "●").

  2. Create yourself a CSS font-face which uses that font.

  3. 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜