Який найкращий спосіб обмежити "кількість" - лише введення текстових полів?

Я шукаю те, що дозволяє десяткові крапки.

Я бачу багато прикладів. Але ще не вирішити, який саме використовувати.

Оновлення від Praveen Jeganathan

Більше плагінів більше немає, jQuery реалізував власний jQuery.isNumeric()додаток у версії 1.7. Дивіться: https://stackoverflow.com/a/20186188/66767

Оновлення

Для цього є нове і дуже просте рішення:

Це дозволяє використовувати будь- який фільтр введення тексту <input>, включаючи різні числові фільтри. Це дозволить правильно обробити Copy + Paste, Drag + Drop, комбінації клавіш, операції з контекстним меню, нестандартні клавіші та всі розкладки клавіатури.

Дивіться цю відповідь або спробуйте самі на JSFiddle .

jquery.numeric плагін

Я успішно реалізував багато форм за допомогою плагіна jquery.numeric .

$(document).ready(function(){
    $(".numeric").numeric();
});

Більше того, це працює і з текстаріями!

Однак зауважте, що Ctrl + A, Copy + Paste (через контекстне меню) та Drag + Drop не працюватимуть, як очікувалося.

HTML 5

Завдяки більш широкій підтримці стандарту HTML 5, ми можемо використовувати patternатрибут та numberтип для inputелементів для обмеження лише введення числа. У деяких веб-переглядачах (зокрема Google Chrome) це також обмежує вставку нечислового вмісту. Більше інформації про numberта інші нові типи вводу можна отримати тут .

Якщо ви хочете обмежити введення даних (на відміну від перевірки), ви можете працювати з ключовими подіями. щось на зразок цього:

<input type="text" class="numbersOnly" value="" />

І:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Це негайно дає користувачеві знати, що вони не можуть вводити альфа-символи тощо, а не пізніше під час фази перевірки.

Ви все ще хочете перевірити, оскільки введення може бути заповнене вирізанням та вставкою мишею або, можливо, автозаповненням форми, яка може не викликати ключові події.

Я подумав, що найкраща відповідь була одна з вищезгаданих - просто це зробити.

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

але я погоджуюсь, що це боляче, що клавіші зі стрілками та кнопкою видалення притискають курсор до кінця рядка (і через це мене відбили назад на тестуванні)

Я додав у простій зміні

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

таким чином, якщо є якесь натискання кнопки, яке не спричинить зміну тексту, просто проігноруйте його. За допомогою цього ви можете натискати стрілки та видаляти, не стрибаючи до кінця, але це очищає будь-який нечисловий текст.

У плагіні jquery.numeric є деякі помилки, про які я повідомив автора. Це дозволяє декілька десяткових знаків у Safari та Opera, а ви не можете вводити зворотній простір, клавіші зі стрілками чи кілька інших символів управління в Opera. Мені потрібно було позитивне ціле введення, тому я врешті-решт просто написав своє.

$(".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();
  }
});

Більше ніяких плагінів jQuery не реалізував власний jQuery.isNumeric (), доданий у версії 1.7 .

jQuery.isNumeric( value )

Визначає, чи є його аргументом чисельний.

Результати зразків

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Ось приклад того, як зв’язати isNumeric () із слухачем події

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

Згаданий вище плагін числового () не працює в Opera (ви не можете повернути назад, видалити або навіть використовувати клавіші назад або вперед).

Код нижче в обох JQuery або Javascript буде працювати ідеально (і це лише два рядки).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Звичайно, це лише для чистого цифрового введення (плюс зворотна область, видалення, клавіші вперед / назад), але їх можна легко змінити, включаючи точки і мінуси символів.

Ви можете використовувати плагін Validation з його методом number () .

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

Немає необхідності у довгому коді для обмеження введення номера, просто спробуйте цей код.

Він також приймає дійсні int & float обидва значення.

Підхід Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery Підхід

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

ОНОВЛЕННЯ

Наведені вище відповіді є для найбільш поширеного випадку використання - перевірка введення у вигляді числа.

Але нижче - фрагмент коду для спеціальних випадків використання

• Дозволення від’ємних чисел
• Показ недійсного натискання клавіші перед його видаленням.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Нижче наведено те, що я використовую, щоб буквально блокувати натискання клавіш. Це дозволяє лише числа 0-9 і десяткову точку. Легкий у здійсненні, не багато коду, і працює як шарм:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Як невелике вдосконалення цієї пропозиції , ви можете використовувати плагін Validation з його числом () , цифрами та діапазоном . Наприклад, наведене нижче забезпечує отримання додатного цілого числа від 0 до 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

Ви не бачите в алфавітах чарівного вигляду та зникнення на клавіші вниз. Це працює і на пасті миші.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Я спершу спробував вирішити це за допомогою jQuery, але я не був радий, що небажані символи (нецифрові), які насправді з’являються у полі введення, перед тим, як їх видалити під час клавіатури.

Шукаючи інших рішень, я знайшов це:

Цілі (негативні)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Джерело: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Приклад життя: http://jsfiddle.net/u8sZq/

Десяткові бали (негативні)

Щоб дозволити одну десяткову точку, ви можете зробити щось подібне:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Джерело: Просто написав це. Здається, працює. Приклад в реальному часі : http://jsfiddle.net/tjBsF/

Інші налаштування

• Щоб дозволити вводити більше символів, просто додайте їх до регулярного виразу, який виступає основним фільтром char-коду.
• Для реалізації простих контекстуальних обмежень подивіться на поточний вміст (стан) поля введення (oToCheckField.value)

Деякі речі, які можуть бути зацікавлені у виконанні:

• Допускається лише одна десяткова крапка
• Дозволити знак мінус, лише якщо він розташований на початку рядка. Це дозволило б отримати негативні числа.

Недоліки

• Положення каретки недоступне всередині функції. Це значно зменшило контекстні обмеження, які ви можете застосувати (наприклад, немає двох рівних послідовних символів). Не впевнений, який найкращий спосіб отримати доступ до нього.

Я знаю, що заголовок запитує рішення jQuery, але, сподіваємось, хтось знайде це корисним у будь-якому випадку.

Дякую за пост Дейв Аарон Сміт

Я відредагував вашу відповідь, щоб прийняти десяткову точку і число з розділу розділу. Ця робота ідеально підходить для мене.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // 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
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

І застосуйте це на всіх вхідних даних:

$('selector').ForceNumericOnly();

HTML5 підтримує номер типу введення з глобальною підтримкою браузера 88% + згідно CanIUse станом на жовтень 2015 року.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Це не рішення, пов'язане з JQuery, але перевага полягає в тому, що на мобільних телефонах Android-клавіатура буде оптимізована для введення цифр.

Крім того, можна використовувати текст типу введення з новим параметром "шаблон". Детальніше у специфікації HTML5

Я думаю, що це краще, ніж рішення jquery, оскільки в цьому питанні надане рішення jquery не підтримує роздільник тисяч. Якщо ви можете використовувати html5.

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Ця функція робить те ж саме, використовує деякі з наведених вище ідей.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• показати візуальний зворотній зв'язок (неправильне письмо з’являється перед зникненням)
• дозволяє децимал
• ловить кілька "".
• не має проблем з лівим / правим дель і т.д.

/ * це моя перехресна версія браузера Як дозволити лише числові (0-9) у вхідному коді HTML за допомогою jQuery?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

Просто запустіть вміст через parseFloat (). Він повернеться NaNдо недійсного вводу.

Ви можете використовувати autoNumeric від decorplanit.com . Вони мають приємну підтримку чисельних, а також валюти, округлення тощо.

Я використовував в середовищі IE6, маючи декілька змін css, і це був розумний успіх.

Наприклад, numericInputможе бути визначений клас css , який може використовуватися для прикраси ваших полів цифровими вхідними масками.

адаптовано з веб-сайту autoNumeric:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

Я думаю, що це хороший спосіб вирішення цієї проблеми, і це надзвичайно просто:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Приклад: JSFiddle

Розкриті сценарії

Більшість подібних рекомендацій тут не відповідають принаймні одній із них або вимагають багато коду, щоб охопити всі ці сценарії.

1. Допускається лише 1 десяткова крапка.
2. Дозволяє home , endта arrowклавіші.
3. Дозволяє delete і backspaceвикористовуватися в будь-якому індексі.
4. Дозволяє редагувати в будь-якому індексі (до тих пір, поки вхід відповідає рівню).
5. Дозволяє ctrl + v та shift + вставка для дійсного введення (те саме, клацнувши правою кнопкою миші + вставити).
6. Значення тексту не мерехтить, оскільки keyup подія не використовується.
7. Відновлює виділення після недійсного введення.

Сценарії не вдалися

• Починати 0.5і видаляти лише нуль не вийде. Це можна виправити, змінивши регулярний вираз на, /^[0-9]*\.?[0-9]*$/а потім додавши подію розмиття, щоб передбачити a, 0коли текстове поле починається з десяткової крапки (за бажанням). Дивіться цей розширений сценарій для кращого уявлення про те, як це виправити.

Підключати

Я створив цей простий плагін jquery, щоб зробити це простіше:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

Найкращий спосіб - перевірити контекст текстового поля, коли він втрачає фокус.

Ви можете перевірити, чи є вміст "числом", використовуючи регулярний вираз.

Або ви можете використовувати плагін Validation, який в основному робить це автоматично.

Перевірте цей код пошуку для використання Бази даних:

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)'

Це фрагмент, який я щойно зробив (використовуючи частину коду Пітера Мортенсена / Кіта Бентрупа) для цілочисельної перевірки відсотків у текстовому полі (потрібна 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;
    }
});

Цей код:

• Дозволяє використовувати основні цифрові клавіші та цифрову клавіатуру.
• Перевіряє для виключення числових символів Shift (наприклад, #, $,% тощо)
• Замінює значення NaN на 0
• Замінює на 100 значень вище 100

Я сподіваюся, що це допоможе тим, хто потребує.

Тут знайшли чудове рішення http://ajax911.com/numbers-numeric-field-jquery/

Я просто змінив "клавіатуру" на "клавіш" відповідно до моєї вимоги

Якщо ви використовуєте HTML5, вам не потрібно робити велику довжину, щоб виконати перевірку. Просто використовуйте -

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

Атрибут step дозволяє десятковій точці бути дійсним.

Інший спосіб зберегти положення каретки на вході:

$(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. Працює, коли потрібно вставити числа

Плункер: Демо працює

Я просто знайшов ще кращий плагін. Дає вам набагато більше контролю. Скажімо, у вас є поле DOB, де вам потрібно, щоб воно було числовим, але воно також приймає символи "/" або "-".

Це чудово працює!

Перевірте це за адресою http://itgroup.com.ph/alphanumeric/ .

    $(".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, щоб використовувати цей період, хоча я не думаю, що це найкращий спосіб зробити це;)

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

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

Це дуже просто, що у нас вже вбудована функція JavaScript "isNaN" є.

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});