Принудительный ввод чисел при просмотре веб-сайта на Android и iOS

Ответ 1

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

В Android WebView, используемый для отображения страницы, может переопределить onCreateInputConnection. С помощью этого метода вы можете изменить imeOptions, хотя вы все еще ограничены одними и теми же числовыми типами. В качестве альтернативы вы можете работать над созданием своего собственного типа ime.

Пример:

@Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
    InputConnection inputConnection = super.onCreateInputConnection(outAttrs);
    outAttrs.inputType = outAttrs.inputType | InputType.TYPE_NUMBER_VARIATION_NORMAL;
    return inputConnection;
}

Однако, хотя я уверен, что вышеупомянутое решит проблемы многих народов, я думаю, вам нужно что-то более сложное. Мое предложение состоит в том, что любой тип клавиатуры, который вы используете, вы используете java для проверки и форматирования ввода, что делает несколько шагов:

Настройка интерфейса javascript

webView.addJavascriptInterface(new ValidationInterface(), "appValidator");

Создать класс интерфейса

public class ValidationInterface {

    //This method would only tell you if a char is invalid
    @JavascriptInterface
    public boolean isValid(String text){
        int len = text.length();
        //replace everything thats NOT 0-9, $, £, comma or dot
        text = text.replaceAll("[^0-9$£,\.", "");
        //Its valid if the length didnt change (because nothing needs removing)
        return text.length() == len;
    }

    //This method would strip out invalid text as you go
    @JavascriptInterface
    public String getValid(String text){
        //replace everything thats NOT 0-9, $, £, comma or dot
        return text.replaceAll("[^0-9$£,\.", "");
    }

}

Вызов подтверждения при изменении текста

function validate(value) {
    //ive not written js in a long time, you'll definitely need to tweak this
    //EITHER do this
    var valid = appValidator.isValid(value);
    if (valid) {
        //DO SOEMTHING
    } ...

    //OR try this
    var validText = appValidator.getValid(value);
    $('#theField').value(validText); //really not sure this is valid
}

//also just be aware you might need to use keyUp or somethign other than change
//if you are replacing the text as you type, using getValid method
<input id="theField" type="text" onChange="validate(this.value)" ... />

Ответ 2

Я использую:

<input type="text" pattern="\d*" />

Больше ничего не нужно.

Хорошо работает на iPhone, особенно с новыми типами клавиатур. Работает со стандартными и Swiftkey.

Кроме того, это работает на всех устройствах Android.

Update:

Сделайте снимок:

<input type="text" step="0.01" pattern="[0-9]*">

<input type="text" min="0" max="100" pattern="[0-9]*">

Or

<input type="text" pattern="\-?\d+(\.\d{0,})?">

Ответ 3

Я работал над чем-то похожим

взгляните на мой пример: https://jsfiddle.net/pj2uwmtL/6/

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});