Default keyboard type control for Web page input boxes

Source: Internet
Author: User

Reference http://www.w3school.com.cn/html5/att_input_type.asp:

Grammar
<input type= "value" >
Property value
value Description
button Define clickable buttons (mostly used with JavaScript to launch scripts)
CheckBox Define the check box.
Color Defines the color picker.
Date Define date fields (with Calendar control)
Datetime Define date fields (with calendar and Time controls)
Datetime-local Define date fields (with calendar and Time controls)
Month month (with Calendar control) that defines a date field
Week Define Week for Date field (with Calendar control)
Time Defines the time, minute, and second of a date field (with the duration control)
Email Define text fields for e-mail addresses
File Define input fields and "Browse ..." button for file upload
Hidden Define hidden input fields
Image Define an image as a submit button
Number To define a numeric field with a spinner control
Password Defines the password field. The characters in the field are obscured.
Radio Defines a radio button.
Range Defines a numeric field with a slider control.
Reset Defines the reset button. The reset button resets all form fields to their original values.
Search Defines the text field to use for the search.
Submit Define the Submit button. The submit button sends data to the server.
Tel Defines a text field for a phone number.
Text Default. Defines a single-line input field in which users can enter text. The default is 20 characters.
wr. Defines a text field for the URL.

But not to meet my needs, under the normal Android, but under the iphone is not. For example, if it is a card number, as described here, should be used type= "number", but our card is 0, this case will lose focus when the input box, automatically delete the beginning of the 0. Later Google went to a foreign site to speak. Http://sja.co.uk/2012/1/4/controlling-which-ios-keyboard-is-shown

Controlling which IOS keyboard is shown→

Note:this is a minor update to a post I made last year, migrated from a previous blog.

One of my pet hates (there is many), was being presented with the incorrect keyboard, or have auto capitalisation forced  Upon me, when entering information to Web Forms on my IPhone or IPad.  This was something that's very easy-to-control and can be-done so with a little sprinkle of HTML5. You don ' t even has to worry about the old browsers–i ' ve tested this to work perfectly well even in IE6.

The screenshots used in this post is from a UK based IPhone 4S running iOS5; Previous versions of IPhone OS and the IPad would differ.

Text keyboard

Your standard text input field code would look something like this:

<input type="text"></input> 

Telephone keyboard

In order to display the telephone keyboard, use this:

<input type="tel"></input> 

URL keyboard

For URLs-Want this:

<input type="url"></input> 

Email keyboard

For email addresses, your want this:

<input type="email"></input> 

Numerical keyboard

And finally, for a simple numerical keyboard (similar to the telephone one but with no +, * and # Key):

<input type="text" pattern="[0-9]*"></input> 

Other options

It ' s also possible to control auto correct and the use of the following paramater:

autocorrect="off" 

Last, but by no means least, turning on or off auto capitalisation:

autocapitalize="off" 

So the next time you ' re creating a login field that takes an email address with the use of something like this:

<input type="email" autocorrect="off" autocapitalize="off"></input> 

As for the distinction between Android and Apple, PHP can be used to determine the user's current operating system, and then give a different input box, the function is as follows:

Determine the client type of the user

function ClientType () {
if (Stristr ($_server[' http_user_agent '), ' Android ') {
Return "Android";
}else if (stristr ($_server[' http_user_agent '), ' IPhone ')} {
Return "ios";
}else{
return "other";
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.