Я вижу этот вопрос, но ни одно из решений не поддерживает диапазон значений min и max
Как разрешить только числовые (0-9) в поле ввода HTML с помощью jQuery?
Я вижу, что http://jstepper.emkay.dk/ пытается сделать это, но кажется очень ошибочным, поскольку позволяет вводить несколько знаков после запятой и других символов, таких как как ";".
есть ли способ, которым я могу использовать одно из этих решений, а также сказать, что только поддержка min 0 и max 100 в записи текстового поля?
Я автор jStepper, и я только что обновил плагин, чтобы делать то, что вам нравится.
Так что попробуйте еще раз и посмотрите, работает ли это сейчас:)
HTML5 способ добавления таких полей. Работает в Chrome и Safari:
<input type="range" min="0" max="100" step="1" />
Полный пример:
<input id="picker" type="range" min="0" max="100" step="1" onchange="$('#pickerValue').text(this.value)" />
<div id="pickerValue"></div>
Создайте пользовательский тип текстового поля, которое принимает только диапазоны. Что-то вроде этого должно работать:
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textBox = $("<input type='text'>");
// Disallow non-numbers from being typed in box
this.textBox.keydown(function(event) {
var isNotBackspaceOrDelete = event.keyCode != 46 && event.keyCode != 8;
var isNotInteger = event.keyCode < 48 || event.keyCode > 57;
if(isNotBackspaceOrDelete && isNotInteger) {
event.preventDefault();
}
});
// Check for a valid range
this.textBox.keyup(function(event) {
var textBox = event.target;
var isNotInRange = (textBox.value < min) || (textBox.value > max);
if (isNotInRange) {
textBox.value = textBox.value.slice(0, -1);
}
});
return this.textBox;
}
Чтобы использовать его, просто создайте новый TextBox, вызвав new RangeTextBox(min, max). Например
$(document).ready(function() {
$("body").append(new RangeTextBox(1, 18));
});
Отказ от ответственности. Это связано с той же проблемой, что и Хармен в другом ответе на поле, не принимающем значение, подобное 2 для числа "26", если минимальное значение равно 6 как 2 < 6. Вы можете использовать таймер или на самом деле переместить эту проверку за пределами событий keyup и keydown, а затем проверить onblur или onchange. Это позволило бы ввести недопустимые данные для ввода поля, но, тем не менее, это намного меньше, чем нужно.
Изменить: это решение позволяет вводить что-либо, но помещает все недопустимые данные, включая вне диапазонов.
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textBox = $("<input type='text'>");
// Check for a valid range
this.textBox.keyup(function(event) {
var textBox = event.target;
var value = parseInt(textBox.value);
var isNotNumeric = !/^[0-9]+$/.test(textBox.value);
var isOutsideRange = (value < min) || (value > max);
if (isNotNumeric || isOutsideRange) {
$(textBox).addClass('error');
}
else {
$(textBox).removeClass('error');
}
});
return this.textBox;
}
И таблица стилей:
<style type="text/css">
.error {
color: red;
}
Вот, например, способ: "поддерживать только min из 0 и max 100 в записи текстового поля", используя jQuery. Он работает, возвращая вашу запись до того, что было до этого - если вы введете ключ, в результате чего значение будет меньше MIN или более этого MAX. Вы можете установить флаг для принятия только целых чисел.
HTML-тег будет выглядеть так: (JSFIDDLE)
<input type="text" class="maxmin" min="0" max="100" intOnly="true" />
Затем вы запустите этот JavaScript в готовом коде документа:
// Run this on document ready to allow only numbers between
// max and min to be entered into textboxes with class="maxmin".
// Attributes max, min, and intOnly="true/false" are set in the tag.
// Min should probably be "0" or "1", or max and min could be single digits.
// Otherwise for example, if min=5, you couldn't enter 23 because 2 < 5.
$(".maxmin").each(function () {
var thisJ = $(this);
var max = thisJ.attr("max") * 1;
var min = thisJ.attr("min") * 1;
var intOnly = String(thisJ.attr("intOnly")).toLowerCase() == "true";
var test = function (str) {
return str == "" || /* (!intOnly && str == ".") || */
($.isNumeric(str) && str * 1 <= max && str * 1 >= min &&
(!intOnly || str.indexOf(".") == -1) && str.match(/^0\d/) == null);
// commented out code would allow entries like ".7"
};
thisJ.keydown(function () {
var str = thisJ.val();
if (test(str)) thisJ.data("dwnval", str);
});
thisJ.keyup(function () {
var str = thisJ.val();
if (!test(str)) thisJ.val(thisJ.data("dwnval"));
})
});
Я новичок в этом, поэтому любые конструктивные комментарии будут оценены.
Вот пример того, как может выглядеть ваш script:
var value, min=6, max=100;
function isNumberPressed(k) {
// 48-57 are number 0-9 on a normal keyboard, 96-105 are keypad numbers
return (k > 47 && k < 58) || (k > 95 && k < 106) ? true : false;
}
function isValidNumber(v){
// Check if a valid number is entered
return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}
$(document).ready(function() {
$("#test").keydown(function(e) {
// See if a valid key is pressed
if(isNumberPressed(e.keyCode)){
if(isValidNumber($(this).val())) value = $(this).val();
}
// Do nothing if unallowed keys are pressed
else if(e.keyCode != 46 && e.keyCode != 8) return false;
}).keyup(function(){
// If the value, including the latest number that added, is not valid (to high or to low), show the old value again
if(isValidNumber($(this).val()) == false){
$(this).val(value);
}
});
});
Но у него большой недостаток, вы не можете ввести 26, если минимум равен 6, потому что 2 < 6. Это не проблема, если у вас минимум меньше или равно 10.
Однако, если ваш минимум больше 10, вы можете рассмотреть этот код:
var timer, min=36, max=100;
function isValidNumber(v){
// Check if a valid number is entered
return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}
$(document).ready(function() {
$("#test").keydown(function(e) {
that = this;
// Clear the timer
if(timer)
clearTimeout(timer);
// Set a new timer with a delay of one second
timer = setTimeout(function(){
if(isValidNumber($(that).val()) == false) $(that).addClass('error');
else $(that).removeClass('error');
}, 1000);
});
});
Он проверяет ввод с задержкой в одну секунду. Для этого вам нужен код CSS, например:
input.error {
border: 2px solid red;
}
Оба скрипта проверяют значения "на лету", что является отличным методом.
Я создал jQuery SpinControl, который поддерживает min, max и step. Сначала он проверяет, поддерживается ли SpinControl браузером (Opera), прежде чем он добавит пользовательский.
JStepper имеет ошибку, Я пробую тестер на их сайте. http://jstepper.emkay.dk/Default.aspx
apple правила, но я могу ввести текст: 8778.09999
Я искал и, наконец, понимаю, что введенное значение должно быть проверено в трех случаях. keydown, keypress и keyup, и у любого из них есть свои обязанности. нажатие клавиши: Проверьте нажатую клавишу и решите ввести введенный символ. Тогда, если это числовое значение, пусть это иначе предотвратит действие. Как вы можете видеть, я попытался проверить диапазон здесь.
//var final = val + String.fromCharCode(charCode);
//alert(final);
//if (final < min || final > max)
// return false;
но перед этим мы просто имеем новый символ и значение. так что это неправильно, если мы попытаемся проверить их сумму, потому что, возможно, пользователь выбрал некоторую часть значения и новый характер. предположим, что максимальный диапазон равен 100, и у нас есть "345" в Входном и выбранном пользователем "34", теперь пользователь нажимает "2", а результат должен быть "25", но сумма "345" + "2" равна 347, и функция предотвращает это, Поэтому я решил использовать событие keyup для проверки диапазона и правильного значения. Наконец, ключ, используемый для проверки стрелки вверх и вниз и контрольного значения, когда браузер поддерживает тип ввода номера HTML5 без изменения типа нажатия клавиш, поэтому вы не можете его использовать.
Я написал простой script и надеюсь, что помощь. Вы можете увидеть его в http://jsfiddle.net/QMaster/r4hwr3a6/