使用自定义/货币模式强制 iOS 数字键盘 [英] Force iOS numeric keyboard with custom / currency pattern

问题描述

是否有可能强制 iOS 设备在使用自定义模式作为输入类型时显示数字键盘?

Is there a possiblity to force an iOS-device to show the numeric keyboard while using a custom pattern as input type?

我的输入模式:

<input id="price" class="numeric" pattern="d+((.|,)d{1,2})?" name="price" 
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />

我想输入一个像14.99"这样的货币值，并在 iOS 设备上显示一个可以访问数字的键盘

I want to type a currency value like '14.99' and show up a keyboard with access to numbers on the iOS device

<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[d]*' />

都缺少小数点和/或在添加小数点时未验证为数字.另一种方法可能是一个 javascript 函数，它在正确的位置创建小数点，就像按 1->2->9->9 的顺序在 keypress() 0.01->0.12-> 上创建.1.29->12.99，但这要求输入字段为 type='text' -->这里明显的问题是当聚焦输入字段时会显示文本键盘.

are all missing the decimal sign and/or are not validating as number when adding a decimal sign. An alternative way could be a javascript function which is creating the decimal sign on the right place, like pressing 1->2->9->9 in this order creates on keypress() 0.01->0.12->1.29->12.99, but this requires the input field to be type='text' --> obvious problem here is that the text keyboard is showed when focussing the input field.

我该如何解决这个问题?

How can I solve this issue?

环境:

• JQM 1.3.2
• jquery 1.8.2

推荐答案

目前，JavaScript 是唯一的解决方案.这是最简单的方法(使用 jQuery):

For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):

HTML

<input type="text">

JavaScript

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

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

这个想法很简单.输入开始并以 type="text" 结束，但它在 touchstart 事件中短暂地变为 type="number".这会导致出现正确的 iOS 键盘.一旦用户开始输入任何输入或离开该字段，输入将再次变为 type="text"，从而绕过验证.

The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.

这种方法有一个缺点.当用户返回到已经填写好的输入时，该输入将丢失(如果未验证).这意味着用户将无法返回并编辑以前的字段.在我的情况下，这并不是那么糟糕，因为用户可能希望使用不同的值一遍又一遍地使用计算器，因此自动删除输入将节省几个步骤.但是，这可能并非在所有情况下都是理想的.

There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.

看起来 Mobile Safari 支持新的 HTML5 输入类型属性，包括电子邮件、号码、搜索、电话和网址.这些将切换显示的键盘.查看类型属性.

It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.

例如，您可以这样做:

<input type="number" />

当输入框有焦点时，会显示数字键盘(就像用户有全键盘并按下123"按钮一样.

And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.

如果你真的只想要数字，你可以指定:

<input type="tel" />

然后用户将获得电话号码拨号键盘.

我知道这适用于 Mobile Safari -- 我只假设它适用于 UIWebView.

I know this works with Mobile Safari -- I only assume it will work with UIWebView.

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

这篇关于使用自定义/货币模式强制 iOS 数字键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！