Как заставить jquery.inputmask работать с типом ввода = число?

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

Есть ли способ сделать это, надеюсь, с некоторыми настройками, которые я пропустил в документации?

Вот мой html:

<input id="Price" name="Price" type="number" placeholder="0.00" tabindex="3"/>

Вот мой js:

$(document).ready(function(){
    $('#Price').inputmask("[9][9]9.99", {
        numericInput: true,
        "placeholder": "0",
        showMaskOnHover: false,
        greedy: false
    });
});

jquery jquery-inputmask
person Nathaniel    schedule 24.07.2014    source источник
comment
Если плагин что-то делает с чтением или установкой положения курсора или выбором/вставкой текста, у вас наверняка возникнут проблемы в Chrome из-за внесенных изменений. См. этот вопрос: stackoverflow.com/questions/22381837/   -  person scunliffe    schedule 25.07.2014
comment
@scanliffe спасибо, что указали мне правильное направление. Сейчас я изменю ввод на текст и подожду, чтобы увидеть, решена ли проблема с положением курсора в хроме.   -  person Nathaniel    schedule 25.07.2014

Ответы (3)


arrow_upward
7
arrow_downward

Плагин jQuery Inputmask (http://plugins.jquery.com/jquery.inputmask/ ) использует setSelectionRange, selectionStart, selectionEnd (в https://github.com/RobinHerbots/jquery.inputmask/blob/3.x/js/jquery.inputmask-multi.js). Эти свойства/методы были удалены из <input type="number"/> полей в Chrome при обновлении в соответствии с изменением W3C.

Если вы считаете, что изменение W3C по удалению этих функций в числовых полях было ошибочным, проголосуйте за ошибка Bugzilla №24796

Существуют некоторые хаки для обхода этой проблемы, или вам, возможно, придется прибегнуть к использованию <input type="text">

person scunliffe    schedule 25.07.2014
comment
Похоже, что плагин inputmask не поддерживает ввод чисел в любом браузере. Я протестировал свой код в последних версиях FF, IE, Opera и Chrome, но он работает только в том случае, если для типа задан текст. Имеют ли другие браузеры те же функции для числовых полей? - person Nathaniel; 25.07.2014

arrow_upward
6
arrow_downward

Я обнаружил, что использование <input type="tel" /> позволяет вводить числа на мобильных телефонах, а также позволяет запускать все те же события, что и type="text"!

«Кажется,

Браузеры, не поддерживающие эти типы, вернутся к использованию типа «текст».

http://www.caniuse.com/#search=tel

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

person Sean Kendle    schedule 11.05.2017

arrow_upward
2
arrow_downward

Мое решение: добавить pattern="[0-9]*" к input type="text", или, если это не сработало, использовать input type="tel" - это позволяет вводить числа на телефонах.

person Радислав Ялилов    schedule 08.11.2017