Мне нужно иметь вход, который останется type="text", но откроет цифровую клавиатуру на устройствах Android и iOS.
Это связано с тем, что в поле ввода все еще будут символы, такие как £ и ,, которые не будут возможны в пределах type="number" или type="tel".
Я обнаружил, что вы можете заставить цифровую клавиатуру на iOS использовать pattern="\d*", но это ничего не делает для Android.
Вот что я до сих пор:
<input type="text" inputmode="numeric" pattern="\d*" value="£2,000,000" />
Изменить (в случае очистки комментариев) этот ответ был написан до того, как был задан вопрос о мобильных приложениях и мобильных приложениях. Однако этот ответ поможет тем, кто ищет решение при использовании 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)" ... />
Я использую:
<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,})?">
Я работал над чем-то похожим
взгляните на мой пример: https://jsfiddle.net/pj2uwmtL/6/
$("input.numbers").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});