Маска ввода для числового и десятичного

Ответ 1

Вы можете использовать jquery numeric для чисел.
Текущая версия позволяет то, что вы ищете, но кто-то изменил код немного, и он работает:

HTML

<input class="numeric" type="text" />

Javascript

$(".numeric").numeric({ decimal : ".",  negative : false, scale: 3 });

Это весь источник.
И я подготовил этот fiddle, чтобы вы могли видеть, как он работает.

Ответ 2

используя плагин ввода ввода jQuery (6 целых и 2 десятичных разряда):

HTML:

<input class="mask" type="text" />

JQuery

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\.\\d{1,2})?$"});

Я надеюсь, что это поможет кому-то

Ответ 3

Вы можете сделать это с помощью плагина jquery inputmask.

HTML:

<input id="price" type="text">

Javascript:

$('#price').inputmask({
  alias: 'numeric', 
  allowMinus: false,  
  digits: 2, 
  max: 999.99
});

https://codepen.io/vladimir-vovk/pen/BgNLgv

Ответ 4

или также

<input type="text" onkeypress="handleNumber(event, '€ {-10,3} $')" placeholder="€  $" size=25>

с

function handleNumber(event, mask) {
    /* numeric mask with pre, post, minus sign, dots and comma as decimal separator
        {}: positive integer
        {10}: positive integer max 10 digit
        {,3}: positive float max 3 decimal
        {10,3}: positive float max 7 digit and 3 decimal
        {null,null}: positive integer
        {10,null}: positive integer max 10 digit
        {null,3}: positive float max 3 decimal
        {-}: positive or negative integer
        {-10}: positive or negative integer max 10 digit
        {-,3}: positive or negative float max 3 decimal
        {-10,3}: positive or negative float max 7 digit and 3 decimal
    */
    with (event) {
        stopPropagation()
        preventDefault()
        if (!charCode) return
        var c = String.fromCharCode(charCode)
        if (c.match(/[^-\d,]/)) return
        with (target) {
            var txt = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
            var pos = selectionStart + 1
        }
    }
    var dot = count(txt, /\./, pos)
    txt = txt.replace(/[^-\d,]/g,'')

    var mask = mask.match(/^(\D*)\{(-)?(\d*|null)?(?:,(\d+|null))?\}(\D*)$/); if (!mask) return // meglio exception?
    var sign = !!mask[2], decimals = +mask[4], integers = Math.max(0, +mask[3] - (decimals || 0))
    if (!txt.match('^' + (!sign?'':'-?') + '\\d*' + (!decimals?'':'(,\\d*)?') + '$')) return

    txt = txt.split(',')
    if (integers && txt[0] && count(txt[0],/\d/) > integers) return
    if (decimals && txt[1] && txt[1].length > decimals) return
    txt[0] = txt[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.')

    with (event.target) {
        value = mask[1] + txt.join(',') + mask[5]
        selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\./, pos) - dot) 
    }

    function count(str, c, e) {
        e = e || str.length
        for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
        return n
    }
}

Ответ 5

Используйте функцию буксировки, чтобы решить ее, очень просто и полезно:

HTML:

<input class="int-number" type="text" />
<input class="decimal-number" type="text" />

JQuery:

//Integer Number
$(document).on("input", ".int-number", function (e) {
  this.value = this.value.replace(/[^0-9]/g, '');
});

//Decimal Number
$(document).on("input", ".decimal-number", function (e) {
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
});

Ответ 6

Теперь, когда я лучше понимаю, что вам нужно, вот что я предлагаю. Добавьте обработчик клавиатуры для вашего текстового поля, который проверяет содержимое текстового поля с этим регулярным выражением ^[0-9]{1,14}\.[0-9]{2}$, и если он не совпадает, сделайте красный фон или покажите текст или что угодно. Здесь код, который нужно поместить в document.ready

$(document).ready(function() {
    $('selectorForTextbox').bind('keyup', function(e) {
        if (e.srcElement.value.match(/^[0-9]{1,14}\.[0-9]{2}$/) === null) {
            $(this).addClass('invalid');
        } else {
            $(this).removeClass('invalid');
        }
    });
});

Здесь JSFiddle этого в действии. Кроме того, выполните одну и ту же сторону сервера регулярных выражений, и если она не соответствует, требования не были выполнены. Вы также можете сделать это, чтобы проверить событие onsubmit и не позволить пользователю отправлять страницу, если регулярное выражение не совпало.

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

Ответ 7

Попробуйте imaskjs. У него есть Number, RegExp и другие маски. Очень просто расширить.

Ответ 8

Если ваша система на английском языке, используйте ответ @Rick:

Если ваша система на бразильском португальском, используйте это:

Импортировать:

<script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script     src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

HTML:

<input class="mask" type="text" />

JS:

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\,\\d{1,2})?$"});

Это потому, что на бразильском португальском языке мы пишем "1.000.000,00", а не "1,000,000.00", как на английском, поэтому, если вы используете "." система не поймет десятичную отметку.

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