Принудительная цифровая клавиатура iOS с пользовательским/валютным шаблоном

Ответ 1

На данный момент 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 = "number" в событии touchstart. Это приведет к появлению правильной клавиатуры iOS. Как только пользователь начинает вводить любой вход или покидает поле, вход снова становится типом = "текст", тем самым обходя проверку.

Там один недостаток этого метода. Когда пользователь вернется на вход, который уже был заполнен, вход будет потерян (если он не будет проверяться). Это означает, что пользователь не сможет вернуться и редактировать предыдущие поля. В моем случае это не так уж плохо, потому что пользователь может захотеть использовать калькулятор снова и снова с разными значениями, поэтому автоматически удаляя ввод, он сохранит их на несколько шагов. Однако это может быть не идеальным во всех случаях.

Похоже, что Mobile Safari поддерживает новые атрибуты типа ввода HTML5 по электронной почте, номеру, поиску, tel и url. Они будут переключать отображаемую клавиатуру. См. Атрибут type.

Так, например, вы можете сделать это:

<input type="number" />

И когда поле ввода имеет фокус, отображается цифровая клавиатура (как если бы у пользователя была полная клавиатура и нажмите кнопку "123".

Если вам действительно нужны номера, вы можете указать:

<input type="tel" />

И тогда пользователь получит клавиатуру набора номера телефона.

Я знаю, что это работает с Mobile Safari - я предполагаю, что он будет работать с UIWebView.

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

Ответ 2

Я сделал этот маленький фрагмент, чтобы добиться того, чего вы хотите, и я тестировал его на 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();
    }
});

Reset:

// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});

Результат:

Ответ 3

Я думаю, что вы можете использовать тот же подход, который я предложил Ranjan.

Использование текстового поля, такого как буфер. Сначала вам нужно определить, когда появится клавиатура, и проверить, является ли первый ответчик веб-просмотром. Затем вы становитесь текстовым в качестве первого ответчика.

Когда вы устанавливаете текст внутри входа в веб-просмотр, вы можете добавить некоторую логику для проверки числа.

Здесь - ссылка моего проекта проекта с решением, в вашем случае вам не нужно менять inputView. Но подход тот же, используйте человека посередине.