iPhone/iOS:为邮政编码提供HTML5键盘-iPhone/iOS:PresentingHTML5KeyboardforPostalCodes

26  

Will this work?

这工作吗?

HTML:

HTML:

This should give you the nice numeric keyboard on Android/iOS phone browsers, disable browser form validation on desktop browsers, not show any arrow spinners, allows leading zeros, and allows commas and letters on desktop browsers, as well as on iPad.

这将使您在Android/iOS手机浏览器上拥有漂亮的数字键盘，在桌面浏览器上禁用浏览器表单验证，不显示任何箭头旋转器，允许前置零，允许在桌面浏览器和iPad上使用逗号和字母。

Android / iOS phones:

Android / iOS手机:

Desktop:

桌面:

iPad:

iPad:

7  

A quick google search found this Stackoverflow question.

快速搜索谷歌找到了这个Stackoverflow问题。

HTML

HTML

Javascript

Javascript

$('input[type="text"]').on('touchstart', function() {
   $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
   $(this).attr('type', 'text');
});

The input type is switched before the form can be validated, showing the correct keyboard without messing up the value. If you only want it to run on iOS, you will probably have to use the user agent.

在对表单进行验证之前，将切换输入类型，显示正确的键盘，而不会打乱值。如果您只想让它在iOS上运行，您可能需要使用用户代理。

Stackoverflow on detecting iOS

Stackoverflow iOS检测

7  

Browsers currently have no proper way of representing numeric codes like postcodes and credit card numbers. The best solution is to use type='tel' which will give you a number keypad and ability to add any character on desktop.

浏览器目前没有合适的方式来表示数字代码，比如邮编和信用卡号。最好的解决方案是使用type='tel'，它将给你一个数字键盘和能力添加任何字符在桌面上。

Type text and pattern='/d' will give you a number keypad but only on iOS.

输入文本和模式='/d'将给你一个数字键盘，但只在iOS上。

There is an HTML5.1 proposal for an attribute called inputmode which would allow you to specify keypad regardless of type. However not is not currently supported by any browser.

存在一个名为inputmode的HTML5.1建议属性，允许您指定键盘(无论类型如何)。然而，目前没有任何浏览器支持。

I would also recommend having a look at the Webshim polyfill library which has a polyfill method for these types of inputs.

我还建议您看看Webshim polyfill库，该库为这些类型的输入提供了一个polyfill方法。

5  

This will make the numerical side of the ios keyboard display by default and maintains the ability to switch to the alphabetical side. When the html input type changes, the device changes the keyboard to match the appropriate type.

这将使ios键盘的数字端默认显示，并保持切换到字母端的能力。当html输入类型改变时，设备会改变键盘以匹配相应的类型。

(function ($) {
    var cOntrol= $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'number');
        }
    })
}(jQuery));


Change

alternate demo: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/

交替演示:http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/

If you want the large numerical format keyboard (the telephone style) you can adjust the code accordingly and it still works:

如果你想要大的数字格式键盘(电话风格)，你可以相应地调整代码，它仍然可以工作:

(function ($) {
    var cOntrol= $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'tel');
        }
    })
}(jQuery));


Change

0  

Try this:

试试这个:

I know this is very hackish way, but this apparently works.
I haven't tested on Android devices though.

我知道这是非常陈腐的做法，但这显然行得通。我还没有在Android设备上测试过。

Note this may causes a little noticeable glitches when $this.attr('type', 'number') because this reset the value when input has non numerical characters.

请注意，这可能会引起一些明显的小故障。attr('type'， 'number')因为当输入具有非数值字符时，会重置值。

Basic ideas are stolen from this answer :)

基本的想法从这个答案中被窃取:)

0  

An update to this question in iOS 11. You can get the number keypad by simply adding the pattern attribute (pattern="[0-9]*") to any input with a number type.

在ios11中更新这个问题。只需将pattern属性(pattern="[0-9]*")添加到任何具有number类型的输入中，就可以获得number keypad。

The following works as expected.

以下是预期的工作。

This also works.

这同样适用。

@davidelrizzo posted part of the answer, but the comments from @Miguel Guardo and @turibe give a fuller picture but are easy to miss.

@davidelrizzo发布了部分答案，但是来自@Miguel Guardo和@turibe的评论提供了更完整的图片，但是很容易被忽略。

-1  

Why not check the header of the HTTP request (user agent), and serve up the numeric layout to the iOS devices, while serving up the alphanumeric layout to the rest?

为什么不检查HTTP请求(用户代理)的头，将数字布局提供给iOS设备，而将字母数字布局提供给其他设备呢?