Запрещение пользователю вводить больше чисел после 2 цифр до десятичной точки

У меня проблема с тем, чтобы позволить пользователям вводить числовые значения в мои текстовые поля, которые имеют тот же класс.

Что я хочу:

  • Разрешить пользователям вводить только 2 числа до запятой и еще 2 после нее; в противном случае все клавиши регистрируются, кроме клавиш со стрелками, клавиши возврата и клавиши удаления.

Текущий выпуск

  • Пользователи могут ввести только 2 числа; однако после того, как он / она добавит десятичную точку, они могут добавить перед ней другие числа.
  • В настоящее время пользователи могут вводить только 5 цифр — 2 до запятой и еще 2 после запятой. Когда они удаляют одну цифру после запятой, они все равно могут добавить больше числа к цифре до этой запятой.

Мой HTML:

<form method="post">
    <div class="row">
        <label>Val 1</label>
        <input type="text" class="validate" name="val1" maxlength="5" />
    </div>
    <div class="row">
        <label>Val 2</label>
        <input type="text" class="validate" name="val2" maxlength="5" />
    </div>
    <div class="row">
        <label>Val 3</label>
        <input type="text" class="validate" name="val3" maxlength="5" />
    </div>
    <div class="row">
        <button type="submit">Send</button>
    </div>
</form>

My JS:

Number.prototype.between  = function (a, b, inclusive) {
        var min = Math.min.apply(Math, [a,b]),
            max = Math.max.apply(Math, [a,b]);
        return inclusive ? this >= min && this <= max : this > min && this < max;
    };  
$('.validate').keypress( function( event ) {
        var v = parseFloat($(this).val() + String.fromCharCode(event.which));

        textValue = parseFloat(v).toString();
        var newVal = parseInt( textValue.substr(0, textValue.indexOf(".")) );

        console.log(newVal);
        if(textValue.length < 6){
           if(!parseFloat(v).between(0,99.99,true)) {
                v = this.value.substring(0, 2);
                $(this).val(v);
                return false;
            } 
            return true;
        }
    });

Вот ссылка на мою ДЕМО-версию фидделя


javascript validation jquery numeric
person Sophea Phy    schedule 26.09.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Попробуй это :

   <input type="text" class="validate" name="val1" maxlength="5" onkeypress="return CheckDecimalValues(event)" />

function CheckDecimalValues(evt) {
    var keyCode = evt.keyCode ? evt.keyCode : ((evt.charCode) ? evt.charCode : evt.which);
    //    8   Backspace
    //    9   Tab key 
    //    46  Delete
    //    35  End Key
    //    36  Home Key
    //    37  Left arrow Move
    //    39  Right arrow Move
    if (!(keyCode >= 48 && keyCode <= 57)) {
        if (!(keyCode == 8 || keyCode == 9 || keyCode == 35 || keyCode == 36 || keyCode == 37 || keyCode == 39 || keyCode == 46)) {
            return false;
        }
        else {
            return true;
        }
    }

    var velement = evt.target || evt.srcElement
    var fstpart_val = velement.value;
    var fstpart = velement.value.length;
    if (fstpart .length == 2) return false;
    var parts = velement.value.split('.');
    if (parts[0].length >= 14) return false;
    if (parts.length == 2 && parts[1].length >= 2) return false;
}
person bgs    schedule 26.09.2013
comment
Я только что обнаружил проблему с этим подходом. Когда пользователь копирует/вставляет число с более чем двумя десятичными знаками, это разрешено. Поэтому я использовал оба подхода, предложенные BGS и Aashray. - person dance2die; 11.12.2013

arrow_upward
2
arrow_downward

Почему бы вам не использовать регулярное выражение для проверки вашего требования?

Простое регулярное выражение, например:

[0-9]{1}[0-9]{1}[\.]{1}[0-9]{1}[0-9]{1}

можно использовать для проверки ввода, не беспокоясь о нажатиях клавиш. Просто добавьте событие onblur в текстовое поле, чтобы подтвердить это.

ИЗМЕНИТЬ:

Я добавил эту Fiddle

Проверьте это.

person Aashray    schedule 26.09.2013
comment
не могли бы вы показать мне, как интегрироваться в событие нажатия клавиши? Извините, так как я очень новичок в jquery - person Sophea Phy; 26.09.2013
comment
Я добавил скрипку. Посмотрите, удовлетворяет ли это ваше требование. - person Aashray; 26.09.2013
comment
ах, это не работает. в настоящее время я хочу, чтобы пользователи вводили только 2 цифры до и после десятичной точки. Моя проблема в том, что когда пользователь удаляет последние 2 цифры, он может добавить еще 1 цифру к первым 2 цифрам. - person Sophea Phy; 26.09.2013
comment
Можете ли вы привести пример? - person Aashray; 26.09.2013