Как ограничить ввод текста в текстовом вводе

Question

У меня есть текстовый ввод для изменения страницы страницы. Мне нужно ограничить ввод номеров страниц некоторым числом f.e. 15 (максимальное количество страниц). Поэтому я пытаюсь использовать этот код ниже, но всегда, когда число больше 15, значение меняется на 15 и фактический номер набора.

actual.on('keypress', function() { 
    console.log('test'); 
    var t = $(this); 
    if (t.val() < 1) t.val('1'); 
    if (t.val() > 15) t.val('15'); 
}); 

Fiddle: http://jsfiddle.net/v6fhobr7/

Может кто-нибудь помочь?

Answer 1

Попробуйте изменить его с 'keypress' на 'keyup' ... есть небольшое мерцание, но оно работает.

Answer 2

@ решение rfornal работает хорошо, но это трудно набрать одно значение цифр, если вы не очень быстро:

http://jsfiddle.net/v6fhobr7/7/

Так что лучше установить небольшой тайм-аут перед изменением значения:

var actual = $('.actual'); 
var tm; 

actual.on('keyup', function() { 
    var t = $(this); 

    if (tm) clearTimeout(tm); 
    tm = setTimeout(function() { 
     if (t.val() < 1) t.val('1'); 
     if (t.val() > 15) t.val('15'); 
    }, 250); 
}); 

JSFiddle демо: http://jsfiddle.net/v6fhobr7/10/

Answer 3

В jQuery 2.x вы можете использовать actual.on('input'), который делает то, что вы хотите, без мерцания.

Обратите внимание, что это не позволит пользователю полностью очистить вход; если вы хотите разрешить это, вы можете обратиться к случаю, где t.val() == '' явно.

actual.on('input', function(e) { 
    var t = $(this); 
    if (t.val() == '') return; 
    if (t.val() < 1) t.val('1'); 
    if (t.val() > 15) t.val('15'); 
}); 

http://jsfiddle.net/v6fhobr7/12/

Edit:

Обратите внимание, что это решение не ограничивает ввод только цифровых символов (вы можете ввести буквы и символы). Если вы хотите предотвратить это, используйте this solution в дополнение к моему ответу выше.

Или, если вам не нужны IE 9 или мобильные браузеры, ответ Mathletics является лучшим.

Answer 4

Используйте поле number.

<input type="number" min="1" max="15" step="1">