jQuery: каков наилучший способ ограничить «числовой» ввод только для текстовых полей? (разрешить десятичные точки)

Question

Каков наилучший способ ограничить ввод «только для чисел» для текстовых полей?

Я ищу что-то, что допускает десятичные точки.

Я вижу много примеров. Но еще предстоит решить, какой из них использовать.

Обновление от Правина Джеганатана

Плагинов больше нет, jQuery реализовал собственный jQuery.isNumeric(), добавленный в v1.7. Смотри: https://stackoverflow.com/a/20186188/66767

Answer 1

Другой способ сохранить позицию каретки на входе:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Преимущества:

1. Пользователь может использовать клавиши со стрелками, Backspace, Delete, ...
2. Работает, когда вы хотите вставить цифры

Плункер: Демонстрационная работа

Answer 2

Если вы используете HTML5, вам не нужно идти на все, чтобы выполнить проверку. Просто используйте -

<input type="number" step="any" />

Атрибут шага позволяет использовать десятичную точку.

Answer 3

Это фрагмент, который я только что сделал (используя часть кода Питера Мортенсена / Кейта Бентрупа) для проверки целочисленного процента в текстовом поле (требуется jQuery):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Этот код:

• Позволяет использовать основные цифровые клавиши и цифровую клавиатуру.
• Проверяет, чтобы исключить сдвигово-числовые символы (например, #, $,% и т. Д.)
• Заменяет значения NaN на 0
• Заменяет на 100 значений выше 100

Надеюсь, это поможет нуждающимся.

Answer 4

Нашел отличное решение здесь http://ajax911.com/numbers-numeric-field-jquery/

Я просто изменил «keyup» на «keydown» согласно моему требованию

Answer 5

Лучший способ - проверять контекст текстового поля всякий раз, когда оно теряет фокус.

Вы можете проверить, является ли содержимое "числом", используя регулярное выражение.

Или вы можете использовать плагин проверки, который в основном делает это автоматически.

Answer 6

Проверьте этот код поиска для использования базы данных:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

Answer 7

Я использовал ответ Джеймса Нелли и добавил onpaste = "return false;" (Håvard Geithus), чтобы гарантировать, что вводится только целое число. Даже если вы попытались вставить, это не позволит.

Answer 8

Я использовал это, с хорошими результатами ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 9

Я использую эту функцию, и она отлично работает

$(document).ready(function () {
        $("#txt_Price").keypress(function (e) {
            //if the letter is not digit then display error and don't type anything
            //if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
                //display error message
                $("#errmsg").html("Digits Only").show().fadeOut("slow");
                return false;
            }
        });
    }); 

Answer 10

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Этот код работал на меня очень хорошо, мне просто нужно было добавить 46 в массиве controlKeys, чтобы использовать точку, хотя я не думаю, что это лучший способ сделать это;)