IOS5 показывает цифровую клавиатуру по умолчанию без использования type = "number" или type = "tel"

Ответ 1

Рабочее решение: протестировано на iPhone 5, Android 2.3, 4

Решение Tadeck (победитель бонуса) с использованием <span>, чтобы содержать символы поля ввода и помещать отформатированный <span> поверх ввода валюты, по сути, я делал.

Мой последний код отличается и короче, поэтому я отправляю его здесь. Это решение разрешает проблему проверки iOS5 символов $,% внутри полей ввода и поэтому input type="number" может использоваться по умолчанию.

Поле символов, например. "xx%" "xx years"

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>

• Просто используйте поле ввода номера и диапазон вне ввода, чтобы отобразить символ.

Поле валюты, например. "$ Ххх, ххх"

<span id="formatted-currency">$500,000</span>
<input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />

• Поместите диапазон сверху ввода валюты и установите вход для Дисплей: нет
• Когда пользователь нажимает/нажимает на диапазон, скрыть диапазон и показать вход. Если вы правильно позиционируете span, переход будет плавным.
• Тип ввода номера выполняет валидацию.
• При размытии и отправке ввода установите html диапазона как входной стоимость. Отформатируйте диапазон. Скройте ввод и покажите диапазон с помощью отформатированное значение.

$('#formatted-currency').click(function(){
    $(this).hide();
    $('#currency-field').show().focus();
});
$('#currency-field').blur(function(){
    $('#formatted-currency').html(this.value);
    $('#formatted-currency').formatCurrency({
        roundToDecimalPlace : -2
    });
    $(this).hide();
    $('#formatted-currency').show();
});
// on submit
$('#formatted-currency').html($('#currency-field').val());
$('#formatted-currency').formatCurrency({
    roundToDecimalPlace : -2
});
$('#currency-field').hide();
$('#formatted-currency').show();

Ответ 2

Стилирование поля, содержащего символы

Когда речь заходит о включении символов в этом поле number, вы можете использовать несколько таких способов:

HTML:

<span id="number-container">
    <input type="number" name="number" id="number-field" value="500" />
    <span id="number-container-symbol">$</span>
</span>

CSS

#number-container {
    position: relative;
}
#number-container-symbol {
    left: 5pt;
    position: absolute;
    top: 0px;
}
#number-field {
    background-color: transparent;
    padding-left: 10pt;
}

Рассматривайте это как доказательство концепции. См. этот jsfiddle для живого примера. Это похоже на Chrome:

Определение меньшей степени детализации

Основываясь на документации по вводу номера (Editor Draft), чтобы определить степень детализации, вам нужно добавить step="<some-floating-point-number>" к тегу <input>:

<input type="number" name="number" value="500.01" step="0.01" />

и он будет работать во многих современных браузерах. См. этот jsfiddle для тестов.

Заключение

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

Альтернативное решение - пустое поле перед чем-то еще

Вы также можете обмануть кого-то, полагая, что он видит содержимое поля ввода, но покажите ему что-то еще за полем (это некоторое расширение моего исходного решения). Затем, если кто-то набрал поле, вы можете распространять правильное значение и т.д., А затем вернуться к предыдущему состоянию при размытии. Смотрите этот код (живой пример на jsfiddle - синий цвет означает, что вы смотрите на то, что находится вне поля):

// store original value from INPUT tag in jQuery .data()
var input_field = jQuery('#number-field');
var display_span = jQuery('#number-container-value');
var base_val = parseFloat(input_field.val());
input_field.data('storedVal', base_val);
input_field.val('');
display_span.html(base_val);

// react to field gaining and losing focus
jQuery('#number-field').on('focus', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    if (typeof el.data('storedVal') != 'undefined'){
        el.val(el.data('storedVal'));
    };
    display.html('');
}).on('blur', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    var new_val = parseFloat(el.val());
    el.data('storedVal', new_val);
    display.html(new_val);
    el.val('');
});

(полный код с стилем находится на указанном jsfiddle). Код нуждается в сокращении и очистке, но это доказательство концепции. Попробуйте и поделитесь своими результатами, пожалуйста.

Ответ 3

Почему бы не поместить $вне поля ввода (в качестве метки). Или знак процента справа от поля ввода? Похоже, это решит вашу проблему, и вы сможете использовать тип ввода = "число", и он просто сработает.

Ответ 4

Ты застрял между камнем и твердым местом. Пока там нет места в спецификации HTML для type="currency" (и это, вероятно, никогда не произойдет из-за разных способов записи валюты в разных странах), вам придется использовать некоторую магию JS, чтобы обойти эту проблему.

Конечно, номер и телефон не будут лучшей идеей, однако, используя немного JS-хитрости, я придумал это решение:

var i   = document.getElementById( 'input' );

i.onblur    = function()
{
    i.type  = 'text';

    i.value = number_format( i.value );
}

i.onfocus   = function()
{
    var v   = Number( i.value.replace( /\D/, '' ) );

    i.type  = 'number';

    i.value = v > 0 ? v : '';
}

Просто я меняю тип ввода в зависимости от фокуса/размытия, это означает, что, как только пользователь покинет текстовое поле, мы можем отформатировать его задницу. Когда пользователь возвращает, мы берем значение, если оно есть > 0, и мы вернем его обратно как число. Здесь рабочий тест, я надеюсь, что это поможет: http://jsfiddle.net/ahmednuaman/uzYQA/

Ответ 5

Следующее выводит цифровую клавиатуру для iPad с iOS5, позволяет вводить любой символ и позволяет установить любое значение:

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

Однако он уродлив, хрупок (возможно, будет разорван в будущем...) и не работает на iPhone (iPhone показывает цифровую клавиатуру, которая допускает только от 0 до 9). Решение работает только с использованием шаблона \d* или его эквивалента [0-9]*.

Возможно, лучше использовать type="tel", который, похоже, действует одинаково.

Ответ 6

У меня была аналогичная проблема, и я придумал это мертво-уродливое решение js, заставив iPad всплывать на цифровой клавиатуре.

Моя проблема заключалась в том, что сафари отфильтровывают все, кроме цифр, когда публикуется форма, и мне нужны разные дополнительные символы, например "3/7" или "65 $".

var elem = document.getElementById('MathAnswer');
elem.type = 'number';

elem.onfocus = function() {
  setTimeout(function() {
    elem.type = 'text'; 
  }, 1);
};

Он просто устанавливает тип ввода обратно в "текст" после того, как iPad показал цифровую клавиатуру, а вуаля Safari больше не удаляет никаких цифр.

Надеюсь, это поможет кому-то!

Ответ 7

Для iPhone существует потенциально другой способ:

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type='number'" onfocus="this.type='text'" />

Это изменяет тип на число, прежде чем вход будет получать фокус при касании (так, что будет отображаться цифровая клавиатура), а затем изменит тип на текст, чтобы можно было отредактировать правильное значение.

Получение надежной работы может быть затруднено, например, в настоящее время сенсорный ввод, но затем отключение пальца от управления оставляет его как type = number, и я не могу придумать способ обнаружения кнопки Next на клавиатуре, среди других проблем.

Ответ 8

Это решение работает на iPad и iPhone, а также на работу Next/Previous. Попробуйте http://fiddle.jshell.net/L77Cq/2/show/ (или http://jsfiddle.net/L77Cq/ для редактирования).

<!DOCTYPE html>
<head>
<style>
    .riggedinput::-webkit-input-placeholder {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
}
</style>
<script>
    function focused() {
        var test = document.getElementById('test');
        setTimeout(function() { // timeout needed so that keyboard changes to numeric when using Next/Previous keyboard navigation buttons
            if (document.activeElement === test) {
                test.type = 'text';
                test.value = test.placeholder;
                test.placeholder = '';
            }
        }, 1);
    }
    function blurred() {
        var test = document.getElementById('test');
        var value = test.value;
        test.placeholder = value;
        test.value = '';
        test.type = 'number';
    }
    if (!/^(iPhone|iPad|iPod)$/.test(navigator.platform)) alert ('Code specific to Mobile Safari');
</script>
</head>
<body>
    <input>
    <input id="test" type="number" class="riggedinput" placeholder="$100.10USD" onfocus="focused()" onblur="blurred()">
    <input>
</body>

У него все еще есть следующие проблемы:  * При использовании форм необходимо скопировать значение в скрытое поле.  * По какой-то причине страница прокручивается забавно (скрывается адресная строка iPhone, скрывается консоль iPad Debug).

PS: Я нашел эту технику независимо от комментария Ахмеда Нуамана выше (я пробовал это в прошлом и заметил его комментарий только сейчас - arrrgh!).

Ответ 9

Ваша проблема будет решена, если Safari будет поддерживать атрибут "inputmode" HTML5 для входных элементов. Никто не знает, если, или когда это произойдет. Тем временем эта ссылка содержит некоторые интересные показания.

Ответ 10

В итоге мы использовали хакерское решение, позволяющее клавиатуре numbersandpunctuation показать, когда фокусируется на iPhone: мы записываем нажатия клавиш и имитируем значение.

https://output.jsbin.com/necuzoj/quiet

Мы попытались изменить тип ввода с типа = number на type = text на focus, но он был ненадежным: (1) цифровая клавиатура не показывала 100% времени, и (2) если форма была дольше, чем на экране, тогда автоматическая прокрутка для отображения сфокусированного входа была полностью заполнена (иногда сфокусированный вход был бы вне экрана или под виртуальной клавиатурой).

Отображение цифровой клавиатуры (например, type=tel) не допускало ввода десятичной точки или двоеточия.

На iPad вы можете просто использовать <input type=text pattern=[0-9]*>, чтобы показать клавиатуру numbersandpunctiation, но это решение не работает для iPhone (iPhone показывает цифровую клавиатуру без десятичной точки).

Ответ 11

Я просто использую что-то вроде <input type="number" name="job_order_id" maxlength="7" size="10px" value="" />, и я получаю клавиатуру с номерами, а не с клавиатурой телефона. Вы также можете поместить ведущие значения в значение, и они уже будут там.