强制使用自定义/通用模式的iOS数字键盘
是否有可能强迫iOS设备在使用自定义模式作为输入类型时显示数字键盘？
我的输入模式：
<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设备上的数字
<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' ->明显的问题是，文本键盘在聚焦输入字段时显示。
我怎样才能解决这个问题？
编辑
环境：
- JQM 1.3.2
- jquery 1.8.2
回答 4
Stack Overflow用户
发布于 2013-11-15 10:04:43
目前，JavaScript是唯一的解决方案。下面是最简单的方法(使用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“，从而规避验证。
这种方法有一个缺点。当用户返回到已填写的输入时，输入将丢失(如果不验证的话)。这意味着用户将无法返回并编辑以前的字段。在我的例子中，这并没有那么糟糕，因为用户可能想用不同的值一次又一次地使用计算器，所以自动删除输入将节省他们几个步骤。然而，这在所有情况下都可能是理想的。
看起来Mobile支持电子邮件、号码、搜索、电话和url等新的HTML5输入类型属性。这些将切换显示的键盘。请参阅type属性。
例如，您可以这样做：：
<input type="number" />当输入框有焦点时，显示数字键盘(就像用户有完整的键盘并按下"123“按钮一样)。
如果你真的只想要数字，你可以指定：
<input type="tel" />，然后用户将获得拨号键盘.的电话号码
我知道这适用于Mobile -我认为它只适用于UIWebView。
http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/
Stack Overflow用户
发布于 2013-11-16 17:44:52
我制作了这个小片段来实现您想要的，并在iPhone 5 v7.0.3上进行了测试。
我使用e.which读取输入的CharCode，然后将其推入表示小数点之前的数字的数组中，并将另一个数组(后面)从(前)数组中移出小数点之后的值。
由于我卑微的编程技巧，这看起来可能很复杂。
1) 代码演示 - 2) 货币换算演示
HTML：
<input type="tel" id="number" />JS
变量和函数：
// declare variables
var i = 0,
before = [],
after = [],
value = [],
number = '';
// reset all values
function resetVal() {
i = 0;
before = [];
after = [];
value = [];
number = '';
$("#number").val("");
$(".amount").html("");
}
// add thousand separater
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}主要代码：
// listen to keyup event
$("#number").on("keyup", function (e, v) {
// accept numbers only (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
number = String.fromCharCode(e.which);
// hide value in input
$(this).val("");
// main array which holds all numbers
value.push(number);
// array of numbers before decimal mark
before.push(value[i]);
// move numbers past decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final value
var val_final = after.join("") + "." + before.join("");
// show value separated by comma(s)
$(this).val(addComma(val_final));
// update counter
i++;
// for demo
$(".amount").html(" " + $(this).val());
} else {
// reset values
resetVal();
}
});重置：
// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
resetVal();
});结果：
https://stackoverflow.com/questions/19684855
复制相似问题
腾讯云开发者
