Как определить JS вводимое число больше или меньше

Question

[Сергей Жужгов]

Есть поле

<input type="text" name="bonus_card" id="bonus_card" />

и кнопка <button id="sub_minus">Списать</button>

и скриптик до которого я догадался

$('#bonus_card').keypress(function(){
						var f = $('#bonus_card').val();
						if( f < 0 || f >= 51 ) { $('#sub_minus').attr('disabled', 'disabled'); }
						else { $('#sub_minus').attr('disabled', ''); }
					});

если в поле "bonus_card" вводить цифры, то должно быть сравнение, например, если ввожу 51 или число меньшее, то кнопка "Списать" - должна быть активной, а если 52 или число большее, то кнопка должна заблокироваться.

Сейчас непонятно как... если вводишь число состоящее из одной цифры, то кнопка активна, если из двух и более, то кнопка блокируется.

Как починить?

Comments

[Сергей Жужгов]

В приведённых решениях всё нормально, но у меня теперь всплыл ещё один косяк... почему если вводишь двухзначное число - работает, а если вводишь однозначное, то прописывает disabled ???

Answer 1

[avalak]

(function () {
    $('#bonus_card').on('change paste keyup', function(evt) {
        var f = $(evt.target).val();
        $('#sub_minus').prop('disabled', f < 0 || f >= 51); 
    });
})();

Comments

[Alexey Svirschevskiy]

Супер, только не вижу смысла в замыкании.

[Сергей Протько]

это типа хорошая практика, оборачивать код в замыкание дабы не плодились в общем пространстве видимости переменные. Скажем $('#sub_minus') надо бы в переменную вынести.

Короче ваш код и переменные желательно делать локальным.

[avalak]

@Fesor всё правильно написал.

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

Answer 2

[Петруша Укропов]

jsfiddle.net/KdwLg

Answer 3

[Илья Милошевич]

1. Функцию нужно привязать к событию keyup, т.к. событие keypress (аналогично событию keydown) будет происходить до обновления данных. Например, вы ввели в поле 123, а вам вернется 12.
2. Чтобы изменять такие динамические свойства (не атрибуты), как, например, disabled, нужно использовать метод prop.

Comments

[Сергей Жужгов]

Спасибо. Ценный для меня совет, т.к. я дилетант...