18

是否有可能在使用自定义模式作为输入类型时强制 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

4 回答 4

21

目前，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" 开始并以 type="text" 结束，但在 touchstart 事件中它会短暂变为 type="number"。这会导致出现正确的 iOS 键盘。一旦用户开始输入任何输入或离开该字段，输入再次变为 type="text"，从而绕过验证。

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

看起来 Mobile Safari 支持电子邮件、号码、搜索、电话和 url 的新 HTML5 输入类型属性。这些将切换显示的键盘。请参阅类型属性。

例如，您可以这样做：

<input type="number" />

并且当输入框有焦点时，会显示数字键盘（就像用户拥有全键盘并点击“123”按钮一样。

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

<input type="tel" />

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

我知道这适用于 Mobile Safari——我只假设它适用于 UIWebView。

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

于 2013-11-15T10:04:43.727 回答
9

我制作了这个小片段来实现您想要的，并且我已经在 iPhone 5 v7.0.3 上对其进行了测试

我曾经e.which读取CharCode输入的内容，然后将其推入一个数组（before），该数组表示小数点之前的数字，另一个数组（after）将值从（before）数组移动到小数点之后。

由于我卑微的编程技能，它可能看起来很复杂。

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();
});

结果：

在此处输入图像描述

于 2013-11-16T17:44:52.003 回答
0

我认为您可以使用我向Ranjan建议的相同方法。

使用像缓冲区这样的文本字段。首先，您需要检测键盘何时出现并检查第一响应者是否是 webview。然后你成为一个文本视图作为第一响应者。

当您在 webview 的输入中设置文本时，您可以添加一些逻辑来验证数字。

这是我的示例项目与解决方案的链接，在您的情况下，您不需要更改 inputView。但是方法是一样的，在中间使用一个 Man。

于 2013-11-20T15:04:30.663 回答
0

无法对https://stackoverflow.com/a/19998430/6437391发表评论，因此作为单独的答案发布...

这与https://stackoverflow.com/a/19998430/6437391的想法相同，但不是切换类型，而是切换的模式。

当值与数字格式不匹配时，这具有不清除焦点文本字段上的值的效果，例如，如果值具有分隔符 (1,234.56)。

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('pattern', '[0-9]*');
});

$('input[type="text"]').on('focus', function() {
  $(this).attr('pattern', actualpattern);
});
于 2018-03-12T20:58:24.570 回答