New! HTML5 Mobile Inputs Documenation

announcement
1

Hey friends, we wrote and released an overview of HTML5 input types and how to change which virtual keyboard to show on mobile devices. Definitely a useful reference when putting together different forms.

3 Likes
2 
Yeah sorry, this is only a simulation of what the virtual keyboard would look like, it doesn't actually do anything on dekstop browsers (it's just an image).

Thanks, it’s amazing ahahahah

3

Thanks, I used most of them already.

4

Awesome. Others include:

  • Time
  • Range (already in the docs)
  • URL
  • and File (not sure about this one though!)

Disclaimer: only used my iPhone to quickly test them! No idea about Android.

5

Android support input type date but without a datepicker like iOS or i missing something? Maybe there would be good to add a small note on the documentation.

And for the completeness:

  • week :wink:

Anyway good job

6

Does anyone support week? It doesn’t seem to be…

7

In the actual iOS Safari HTML Reference - last update on 2013-10-22 - week input type is present.
I remeber only datetime input type support was removed.

1 Like
8

@adam and I can look into it this week. Of course, this is the very first version of this page, so plan on it getting some updates and additions over time. :smile:

Edit: Thanks for the info on that, @xAlien95!

9

There also <input type="text" pattern="[0-9]*"/> to force a number keypad only input on iOS.

10

This is the ultimate thing which is mask the mobile or phone number without validate

<pre><div ng-controller="SignUpController" >
   <label class="item item-input">
                            <input type="text" placeholder="Mobile No" ng-model="mob_no" name="mob_no" ng-maxlength="10" ng-minlength="10" maxlength="10" minlength="10" valid-number>
                    </label>

app.directive('validNumber', function() {
return {
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
        if(!ngModelCtrl) {
            return;
        }

        ngModelCtrl.$parsers.push(function(val) {
            var clean = val.replace( /[^0-9]+/g, '');
            if (val !== clean) {
                ngModelCtrl.$setViewValue(clean);
                ngModelCtrl.$render();
            }
            return clean;
        });

        element.bind('keypress', function(event) {
            if(event.keyCode === 32) {
                event.preventDefault();
            }
        });
    }
};

});

11

work on Nexus 4 and Android 4.4.1 ( and also for datetime)

1 Like
13

The date type defaults to the browsers native function. Most desktop browsers don’t do a native date. So, you won’t see one there. Mobile devices have built-in data pickers.

Is that what you mean? If not, setup a simple CodePen sample to show us your problem.

15

Does android have a native type=“date” datepicker? In my Nexus 7 it is not working.

16

It does, but it’s only on android 4.4

http://caniuse.com/#feat=input-datetime

17

It depends on browser beacuse cordova uses Webview.
You can check it using your mobile browser and point it to http://html5test.com/
or using http://caniuse.com/#search=date

18

Thanks ,introduce these input types .there is a problem.i not want to use this “done” tag on keyboard. click here ,and i just want to like this .click here .I don’t know how to do。Do you know how to deal with？