JQuery числовое текстовое поле с минимальным и максимальным диапазонами

Question

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

Как разрешить ввод только HTML (0-9) в поле ввода HTML с помощью jQuery?

Я вижу, что http://jstepper.emkay.dk/ пытается сделать это, но выглядит очень глючно, поскольку позволяет вводить несколько десятичных знаков и другие символы, такие как ";".

Есть ли способ, которым я могу использовать одно из этих решений, а также сказать, что только поддержка min 0 и max 100 в текстовом поле?

Answer 1

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

Так что попробуйте еще раз и посмотрите, работает ли он сейчас:)

Answer 2

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>

Answer 3

Создание пользовательского типа текстового поля, которое принимает только диапазоны.Нечто подобное должно работать:

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. Вы можете использовать таймер или фактически переместить эту проверку за пределы событий <code>keyup и keydown, а вместо этого проверить onblur или onchange.Это позволило бы вводить недопустимые данные в поле, но это намного меньше раздражало.

Редактировать: Это решение позволяет вводить все, что угодно, но помечает все недопустимые данные, в том числе и за пределами диапазона.* И таблица стилей:

<style type="text/css">
.error {
    color: red;
}

Answer 4

Текстовое поле MIN MAX - функция jQuery

Вот способ, например, «поддерживать только минимальные 0 и максимальные 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"));
    })
});

Я новичок в этом, поэтому любые конструктивные комментарии приветствуются.

Answer 5

Я создал jQuery SpinControl , который поддерживает min, max и step. Сначала он проверяет, поддерживает ли SpinControl браузер (Opera), а затем добавляет пользовательский.

Answer 6

Вот пример того, как ваш скрипт может выглядеть:

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's 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. </p>

Однако, если ваш минимум больше 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;
}

Оба сценария проверяют значения на лету, что является отличным методом.

Answer 7

Я искал и наконец понял, что введенное значение должно быть проверено в трех случаях. 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 без изменения, например, при нажатии клавиши, поэтому вы не можете его использовать.

Я написал простой сценарий и надеюсь, что это поможет. Вы можете увидеть это в http://jsfiddle.net/QMaster/r4hwr3a6/

Answer 8

У JStepper есть ошибка, Я пробую тестер на их сайте. http://jstepper.emkay.dk/Default.aspx

яблочные правила, но я могу ввести текст: 8778.09999