Ввод текста в формате HTML позволяет вводить только цифры


853

Есть ли быстрый способ установить ввод текста HTML ( <input type=text />), чтобы разрешить только числовые нажатия клавиш (плюс '.')?


81
Многие решения здесь работают только при нажатии клавиш. Они потерпят неудачу, если люди вставят текст с помощью меню или перетаскивают текст в поле ввода текста. Я был укушен этим раньше. Быть осторожен!
Беннет МакЭлви

83
@JuliusA - вам всегда все равно нужна проверка на стороне сервера.
Стивен Р

46
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Дрооганс

14
@Droogans замечает, что также отключает любую другую клавишу, например TAB для перехода к следующему вводу, или любой другой ярлык, не связанный напрямую с вводом, например cmd + R, для обновления сайта, если ввод сфокусирован.
Алехандро Перес

1
Если вы в порядке с плагином, используйте NumericInput. Демонстрация: jsfiddle.net/152sumxu/2 Подробнее здесь: stackoverflow.com/a/27561763/82961
Faiz

Ответы:


1138

Примечание. Это обновленный ответ. Комментарии ниже относятся к старой версии, которая путалась с кодами клавиш.

JavaScript

Попробуйте сами на JSFiddle .

Вы можете отфильтровать входные значения текста <input>с помощью следующей setInputFilterфункции (поддерживает «Копировать + Вставить», «Перетаскивание», «Горячие клавиши», операции с контекстным меню, неиспользуемые клавиши, положение каретки, различные раскладки клавиатуры и все браузеры, начиная с IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

Теперь вы можете использовать setInputFilterфункцию для установки входного фильтра:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Посмотрите демонстрацию JSFiddle для большего количества примеров входного фильтра. Также обратите внимание, что вы все равно должны выполнить проверку на стороне сервера!

Машинопись

Вот версия TypeScript этого.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

JQuery

Существует также версия JQuery этого. Смотрите этот ответ .

HTML 5

HTML 5 имеет собственное решение с <input type="number">(см. Спецификацию ), но обратите внимание, что поддержка браузера варьируется:

  • Большинство браузеров проверяют ввод только при отправке формы, а не при вводе.
  • Большинство мобильных браузеров не поддерживают step, minи maxатрибуты.
  • Chrome (версия 71.0.3578.98) по-прежнему позволяет пользователю вводить символы eи Eв поле. Также посмотрите этот вопрос .
  • Firefox (версия 64.0) и Edge (EdgeHTML версия 17.17134) по-прежнему позволяют пользователю вводить любой текст в поле.

Попробуйте сами на w3schools.com .


4
Хотя это был бы хороший выбор, он по-прежнему позволяет вводить такие символы, как /, несколько точек, другие операторы и т. Д.
Махендра Лия

6
Все еще не поддерживается Firefox 21 (я даже не говорю о IE9 или более ранней версии ...)
JBE

67
Номер типа ввода не предназначен для использования, чтобы ваш вход принимал только цифры. Он предназначен для входных данных, которые указывают «количество элементов». Например, Chrome добавляет две маленькие стрелки, чтобы уменьшить число на единицу. Правильный ввод цифр - это некое смешное упущение в HTML.
Эрвин

9
Type = "number" фактически не мешает вводить недопустимый текст в поле; Похоже, что вы можете даже вырезать и вставить данные мусора в поле, даже в Chrome.
перфекционист

6
Единственное, что я хотел бы добавить к этому, это изменить строку Ctrl + A, чтобы включить пользователей MacOSX:(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
MForMarlon

281

Используйте этот DOM

<input type='text' onkeypress='validate(event)' />

И этот сценарий

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

12
German-settings на eeepc 900. Некоторые клавиши для хорошего усабилия не работают: - backspace (keyCode: 8) - навигационная клавиша влево и вправо (keyCode: 37, 38) копирование и вставка также возможны ...
Michael Piendl

11
Большинству людей все равно, появление ошибки скрипта плохо отражается на вашем сайте.
Роберт Джеппезен

14
несколько проблем с этим кодом. Вы можете войти. более одного раза, второй это не позволяет удалить ключ, какое-либо решение?
coure2011

4
Я заботился о backspace, delete и стрелки не работают. Если вы удалите «theEvent.keycode ||» и добавите: «if (/ [- ~] / &&! Regex.test (key)) {», тогда это работает лучше (в любом случае для ASCII / UTF). Но тогда это не будет отклонять китайские иероглифы! :)
Сэм Уоткинс

4
это позволяет кому-то вставлять случайные вещи на входе
Vitim.us

137

Я искал долго и упорно за хороший ответ на это, и мы отчаянно нуждаемся <input type="number", но мало того , что эти два являются наиболее лаконичными способами , которыми я мог бы придумать:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Если вам не нравится недопустимый символ, отображаемый в течение доли секунды перед удалением, мой метод ниже. Обратите внимание на многочисленные дополнительные условия, это позволяет избежать отключения всех видов навигации и горячих клавиш. Если кто-нибудь знает, как это компактифицировать, сообщите нам!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

4
входной тип = "число" идет в HTML 5 - и вы можете использовать JavaScript в качестве резервного заполнения ... stevefenton.co.uk/Content/Blog/Date/201105/Blog/…
Фентон

5
Хороший метод, но его можно сломать, нажав и удерживая недопустимую клавишу
Скотт Браун

8
Измените регулярное выражение на /[^\d+]/и оно будет работать, удерживая нажатой кнопку
boecko

11
@boecko спасибо за это, но учтите, что так и должно быть /[^\d]+/. Хорошее решение, хотя. Также @ user235859
Моссельман

11
Он .тоже хотел разрешить . Вы действительно должны сделать это/[^0-9.]/g
Qsario

95

Вот простой, который учитывает ровно один десятичный знак, но не более:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />


13
Дескрипторы: копирование + вставка, перетаскивание, допускается только 1 десятичное число, табуляция, удаление, возврат на одну позицию - используйте эту
Mathemats

Можно ли извлечь эту логику из oninput, чтобы ее можно было использовать глобально?
ЕМА

@ema - да, см моего другого ответа здесь , который показывает , как вы можете применить правила с помощью класса.
Биллиноа

если вы используете это в угловой форме, значение не будет обновляться в значении элемента управления формы.
Ale_info

Потрясающие. Я изменяю событие на this.value = this.value.replace (/ [^ 0-9 .-] / g, '') .replace (/(\..*)\./ g, '$ 1'). заменить (/ ^ 0 + / g, '') .replace (/ (? <! ^) - / g, ''); Таким образом, он обрабатывает только - в начале и не допускает 0 в начале числа.
brenth

54

И еще один пример, который прекрасно работает для меня:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Также прикрепить к событию нажатия клавиши

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

И HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Вот пример jsFiddle


Как насчет вставленного текста?
Джейсон Эберси

Почему я получаю «событие не определено», когда я вызываю эту функцию?
Винсент

1
это не работает в Firefox, когда event.keyCode всегда возвращается 0. Я исправил новый код: function validateNumber (event) {var key = event.which || event.charCode || event.keyCode || 0; if (key == 8 || key == 46 || key == 37 || key == 39) {return true; } else if (ключ <48 || ключ> 57) {return false; } верните истину; };
Луан Нгуен

1
Как сказала @Jessica, вы можете добавить апостроф и даже знак процента.
Алехандро Нава

1
Очень близко! но допускает более одного десятичного знака.
кросс

52

HTML5 имеет <input type=number> , что звучит правильно для вас. В настоящее время только Opera поддерживает его изначально, но есть проект, который имеет реализацию JavaScript.


Вот документ, определяющий, какие браузеры поддерживают этот атрибут: caniuse.com/input-number . На момент написания этой статьи Chrome и Safari полностью поддерживали это поле типа. IE 10 имеет частичную поддержку, а Firefox не поддерживает.
Натан Уоллес

Единственная проблема в type=numberтом, что IE9 не поддерживается
J Rod

@JRod Есть полифилл для старого IE. Больше информации здесь .
jkdev

6
Первая проблема заключается в type=numberтом, чтобы разрешить eсимвол, потому что он считается e+10числом. Вторая проблема заключается в том, что вы не можете ограничить максимальное количество символов на входе.
Хакан Фистик,

Другая проблема состоит в том, что если тип является числом, то я не могу получить преимущества от установки типа, например: «тел».
ScottyBlades

49

Большинство ответов здесь имеют слабость использования ключевых событий .

Многие ответы ограничат вашу способность делать выбор текста с помощью клавиатурных макросов, копирования + вставки и более нежелательного поведения, другие, похоже, зависят от конкретных плагинов jQuery, которые убивают мух с помощью пулеметов.

Это простое решение, кажется, лучше всего подходит для кроссплатформенности, независимо от механизма ввода (нажатие клавиш, копирование + вставка, щелчок правой кнопкой мыши на копирование + вставка, преобразование речи в текст и т. Д.). Все макросы клавиатуры для выделения текста по-прежнему будут работать, и это даже ограничит возможность установки нечисловых значений скриптом.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Требуется jQuery 1.7+. Это более полный ответ, поскольку он учитывает входные данные через «копирование». И это тоже проще!
Мемочипан

Альтернативное регулярное выражение: replace(/[^\d]+/g,'')заменить все не-цифры пустой строкой. Модификатор «i» (без учета регистра) не требуется.
Мемочипан

Это должно быть сверху, так как обработчики событий «onkey» в теге больше не должны распространяться ...
gpinkas

Это, безусловно, лучший ответ здесь, но он не допускает цифр с десятичными числами. Есть идеи, как это может работать?
Atirag

6
@Atirag Если вы хотите десятичные дроби, вы можете изменить регулярное выражение/[^\d,.]+/
EJTH

41

Я решил использовать комбинацию двух ответов, упомянутых здесь, т.е.

<input type="number" />

а также

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">


Отличный ответ ... +1. Вы также можете уменьшить выражение if до: return !(charCode > 31 && (charCode < 48 || charCode > 57));
schadeck

7
Как насчет удаления хотя? Вам нужны цифры, но вы, вероятно, хотите, чтобы люди могли их исправить, не обновляя страницу ...
Мартин Эрлик

40

HTML5 поддерживает регулярные выражения, поэтому вы можете использовать это:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Предупреждение: некоторые браузеры пока не поддерживают это.


7
HTML5 также имеет <input type=number>.
Матиас Биненс

Правда. Вы должны сделать это ответом. Ой, @ Ms2ger уже есть.
james.garriss

<Input type = number> добавляет стрелки для увеличения и уменьшения в определенных браузерах, так что это кажется хорошим решением, когда мы хотим избежать
вращения

35
Шаблон проверяется только при отправке. Вы все еще можете вводить буквы.
Эрвин

Что +значит в шаблоне атрибут?
PlanetHackers

18

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

дополнительно вы можете добавить запятую, точку и минус (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Не работает должным образом на клавиатурах, где для ввода номера нужно использовать клавишу Shift (например, европейская клавиатура AZERTY).
Капитан Разумный

спасибо человек, вы действительно понимаете вопрос! Хороший пример и вне курса обработки. или (что большинство людей хотят, если работают с числами)
real_yggdrasil

Это единственный способ, который предотвращает вставку нечисловых значений.
ДЕРЕК ЛИ

16

Так просто....

// В функции JavaScript (можно использовать HTML или PHP).

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

В вашей форме введите:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

С входом макс. (Это выше позволяет 12-значный номер)


Не делай этого! Это блокирует все: цифровую клавиатуру, клавиши со стрелками, клавишу Delete, горячие клавиши (например, CTRL + A, CTRL + R), даже клавишу TAB - это действительно раздражает!
Корри

@ Корри, я не понимаю, в чем проблема? Это работало нормально в моем случае.
Ненахарш

Первая строка должна быть изменена на:var charCode = (evt.which) ? evt.which : evt.keyCode;
Пейман Ф.

15

2 решения:

Используйте средство проверки формы (например, с плагином проверки jQuery )

Выполните проверку во время события onblur (т.е. когда пользователь покидает поле) поля ввода с помощью регулярного выражения:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Интересно, что я должен был указать регулярное выражение «^ \\ d \\.? \\ d * $», но это может быть потому, что страница запускается с помощью преобразования XSLT.
Пол Томблин

Я думаю, что регулярное выражение неверно. Я использовал эту строку:var regExpr = /^\d+(\.\d*)?$/;
Коста

@costa не уверен, если пользователь хочет ввести .123(вместо 0.123), например?
Ромен Линсолас

@romaintaz. Вы правы, но тогда вам придется изменить регулярное выражение, чтобы убедиться, что в случае, если перед точкой нет цифры, есть цифры после точки. Что - то вроде этого: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;.
Коста

14

Более безопасный подход заключается в проверке значения ввода, а не в перехвате нажатий клавиш и попытке фильтрации кодов клавиш.

Таким образом, пользователь может свободно использовать стрелки на клавиатуре, клавиши-модификаторы, клавишу возврата, удалять, использовать нестандартные клавиши клавиатуры, использовать мышь для вставки, использовать перетаскивание текста, даже использовать специальные возможности ввода.

Скрипт ниже допускает положительные и отрицательные числа

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

РЕДАКТИРОВАТЬ: я удалил свой старый ответ, потому что я думаю, что он устарел сейчас.


Это действительно, кажется, покрывает большинство случаев
Зия Уль Рехман Могал

13

Вы можете использовать шаблон для этого:

<input id="numbers" pattern="[0-9.]+" type="number">

Здесь вы можете увидеть полные советы по интерфейсу мобильного сайта .


Не будет работать в IE8 и 9. См. Caniuse . Все еще хороший ответ.
aloisdg переходит на codidact.com

Вы также можете добавить название = "только цифры", чтобы отобразить ошибку
thouliha

13

Пожалуйста, найдите нижеупомянутое решение. В этом пользователь может быть в состоянии ввести только numericзначение, также пользователь не может быть в состоянии copy, paste, dragиdrop на входе.

Разрешенные персонажи

0,1,2,3,4,5,6,7,8,9

Не допускаются Персонажи и Персонажи через события

  • Алфавитное значение
  • Специальные символы
  • копия
  • Вставить
  • Тянуть
  • Капля

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Дайте мне знать, если это не работает.


11

Если вы хотите предложить устройству (возможно, мобильному телефону) между алфавитным или цифровым, вы можете использовать <input type="number">.


11

Еще один пример, где вы можете добавить только цифры в поле ввода, не буквы

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

10

Короткая и приятная реализация, использующая jQuery и replace () вместо того, чтобы смотреть на event.keyCode или event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Единственный небольшой побочный эффект, что набранная буква появляется на мгновение и CTRL / CMD + A, кажется, ведет себя немного странно.


9

input type="number" является атрибутом HTML5

В другом случае это поможет вам:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Первая строка должна быть изменена на:var charCode = (evt.which) ? evt.which : evt.keyCode;
Пейман Ф.

9

Код JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML код:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

отлично работает, потому что код клавиши возврата равен 8, а выражение регулярного выражения этого не позволяет, так что это простой способ обойти ошибку :)


9

Простой способ решить эту проблему - реализовать функцию jQuery для проверки с помощью регулярных выражений символов, напечатанных в текстовом поле, например:

Ваш HTML-код:

<input class="integerInput" type="text">

И функция JS, используя JQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		


8

Просто другой вариант с использованием jQuery

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

8

просто используйте type = "number", теперь этот атрибут поддерживается в большинстве браузеров

<input type="number" maxlength="3" ng-bind="first">

Я не проверял данные --1(2 минус символы до 1).
Нгок Нам

6

Вы также можете сравнить входное значение (которое по умолчанию рассматривается как строковое) с самим значением в виде числа, например:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Тем не менее, вам нужно привязать это к событию, как keyup и т. Д.


6
<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

6

Я видел отличные ответы, но мне они нравятся как можно меньше и проще, поэтому, возможно, кто-то от этого выиграет. Я хотел бы использовать JavaScript Number()и isNaNфункциональность, как это:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Надеюсь это поможет.


1
Мне это нравится! Такое элегантное решение, без регулярных выражений.
Леви Робертс

Это не ответ на вопрос, OP попросил разрешить только текст на входе, а не проверять впоследствии.
Тимберман

Да, это правда! Но уже есть принятый ответ, который я считаю хорошим, но я подумал, что это может кому-то помочь, плюс это красиво и чисто.
Сича

5

Используйте этот DOM:

<input type = "text" onkeydown = "validate(event)"/>

И этот скрипт:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... ИЛИ этот скрипт, без indexOf, использующий два for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Я использовал атрибут onkeydown вместо onkeypress, потому что атрибут onkeydown проверяется перед атрибутом onkeypress. Проблема будет в браузере Google Chrome.

С атрибутом «onkeypress» TAB будет неуправляемым с «protectDefault» в Google Chrome, однако с атрибутом «onkeydown» TAB станет управляемым!

Код ASCII для TAB => 9

Первый скрипт имеет меньше кода, чем второй, однако, массив символов ASCII должен иметь все ключи.

Второй скрипт намного больше первого, но массиву не нужны все ключи. Первая цифра в каждой позиции массива - это количество раз, которое будет прочитана каждая позиция. Для каждого чтения будет увеличен 1 до следующего. Например:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




В случае числовых ключей только 10 (0 - 9), но если бы они были 1 миллион, не было бы смысла создавать массив со всеми этими ключами.

Коды ASCII:

  • 8 ==> (Backspace);
  • 46 => (Удалить);
  • 37 => (стрелка влево);
  • 39 => (стрелка вправо);
  • 48 - 57 => (цифры);
  • 36 => (дома);
  • 35 => (конец);

5

Это улучшенная функция:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

4

Лучший способ (разрешить ВСЕ типы чисел - реальное отрицательное, реальное положительное, iinteger отрицательное, целое положительное):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

4

Это расширенная версия решения geowa4 . Поддерживает minи maxатрибуты. Если число выходит за пределы диапазона, будет показано предыдущее значение.

Вы можете проверить это здесь.

Применение: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Если входы динамические, используйте это:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

@UserB это не должно ничего удалять.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.