it-roy-ru.com

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

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

698
Julius A

JavaScript

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

Функция setInputFilter из приведенного ниже сценария позволяет вам использовать входной фильтр any для текстового <input>, включая различные числовые фильтры. Это будет правильно обрабатывать Copy + Paste, Drag + Drop, сочетания клавиш, операции контекстного меню, не типизируемые клавиши, положение курсора, все раскладки клавиатуры и все браузеры начиная с IE 9 . Обратите внимание, что вы по-прежнему должны выполнять проверку на стороне сервера!

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

// Restricts input for the given textbox to the given inputFilter.
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);
      }
    });
  });
}

Использование:

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Некоторые входные фильтры, которые вы можете использовать:

  • Значения Integer (как положительные, так и отрицательные):
    /^-?\d*$/.test(value)
  • Integer значения (только положительные):
    /^\d*$/.test(value)
  • Значения Integer (положительные и до определенного предела):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Значения с плавающей точкой (допускается использование . и , в качестве десятичного разделителя):
    /^-?\d*[.,]?\d*$/.test(value)
  • Значения Currency (т.е. не более двух десятичных знаков):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • Шестнадцатеричные значения:
    /^[0-9a-f]*$/i.test(value)

jQuery

Существует также jQuery-версия этого. Смотрите этот ответ или попробуйте сами на JSFiddle .

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 .

Более сложные параметры проверки

Если вы хотите сделать некоторые другие проверочные кусочки, это может быть удобно:

963
inspite

Используйте этот 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();
  }
}
247
geowa4

Я искал долго и упорно за хороший ответ на это, и мы отчаянно нуждаемся в <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) )">
120
user235859

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

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

53
Vasyl

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

45
Ms2ger

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

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

42
billynoah

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

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

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

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

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

<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);">

38
Mahendra Liya

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

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

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

30
james.garriss

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);"/ >
16
patrick

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);"/>
15
Romain Linsolas

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

// В функции 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-значный номер)

14
Rizal Aditya

Пожалуйста, найдите нижеупомянутое решение. При этом пользователь может иметь возможность вводить только значение 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">

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

12
Shyam Shingadiya

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

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

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

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>

Правка: я удалил свой старый ответ, потому что я думаю, что он устарел сейчас.

12
Vitim.us

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

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

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

10
Ashisha Nautiyal

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

8
Steven

Код 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)'/>

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

8
AirWolf

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

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

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

8
Tarmo

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)"/>
7
Vaishali Tekale

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

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

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

<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');">
6
Mile Mijatovic
<input name="amount" type="text" value="Only number in here"/> 

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

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

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

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

5
cincplug

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

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

Используйте этот 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's ...

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 => (конец);
4
Daniel

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

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
Ehsan Chavoshi

Это расширенная версия решения 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'));
            }
    }); 
});
3
user669677

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

$(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();
    };
}); 
3
koolo90

Если вы в порядке с использованием плагинов, вот один из них, который я протестировал. Хорошо работает, кроме пасты.

Числовой ввод

Вот демо http://jsfiddle.net/152sumxu/2

Код ниже (Lib вставлен в строку)

<div id="plugInDemo" class="vMarginLarge">
    <h4>Demo of the plug-in    </h4>
    <div id="demoFields" class="marginSmall">
        <div class="vMarginSmall">
            <div>Any Number</div>
            <div>
                <input type="text" id="anyNumber" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
    (function(b) {
        var c = { allowFloat: false, allowNegative: false};
        b.fn.numericInput = function(e) {
            var f = b.extend({}, c, e);
            var d = f.allowFloat;
            var g = f.allowNegative;
            this.keypress(function(j) {
                var i = j.which;
                var h = b(this).val();
                if (i>0 && (i<48 || i>57)) {
                    if (d == true && i == 46) {
                        if (g == true && a(this) == 0 && h.charAt(0) == "-") {
                            return false
                        }
                        if (h.match(/[.]/)) {
                            return false
                        }
                    }
                    else {
                        if (g == true && i == 45) {
                            if (h.charAt(0) == "-") {
                                return false
                            }
                            if (a(this) != 0) {
                                return false
                            }
                        }
                        else {
                            if (i == 8) {
                                return true
                            }
                            else {
                                return false
                            }
                        }
                    }
                }
                else {
                    if (i>0 && (i >= 48 && i <= 57)) {
                        if (g == true && h.charAt(0) == "-" && a(this) == 0) {
                            return false
                        }
                    }
                }
            });
            return this
        };
        function a(d) {
            if (d.selectionStart) {
                return d.selectionStart
            }
            else {
                if (document.selection) {
                    d.focus();
                    var f = document.selection.createRange();
                    if (f == null) {
                        return 0
                    }
                    var e = d.createTextRange(), g = e.duplicate();
                    e.moveToBookmark(f.getBookmark());
                    g.setEndPoint("EndToStart", e);
                    return g.text.length
                }
            }
            return 0
        }
    }(jQuery));

    $(function() {
       $("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
    });
</script>
2
Faiz

Простой способ решить эту проблему - реализовать функцию 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"/>


		

2
AleKennedy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>

<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

return true;

}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>
2
aravind3

Я мог бы иметь другой (простой) обходной путь для этого ...

Поскольку String.fromCharCode (key) возвращает странные вещи на клавиатуре AZERTY (цифровая клавиатура возвращает код в виде g для 1 и 1 для символа &.

Я понял, что перехват окончательного значения в keyup во входных данных для сброса его в произвольное значение - это более простой, легкий и защищенный от ошибок метод (его также можно выполнить с помощью некоторого регулярного выражения ... для сохранения десятичных дробей и т.д.) нужно отфильтровать другие события Ctrl, Home, Del и Enter ...)

Использование с JQ:

<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>

Атрибут Onkeyup:

<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>
2
Jack

Использование:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

И если вы хотите обновить значение после нажатия клавиши, вы можете изменить onChange for onKeypress , onKeyDown или onKeyup . Но событие onKeypress не запускается ни в одном браузере.

2
Rogerio de Moraes

Это простое решение

Замените .price-input input.quantity на класс вашего входного поля

$(".price-input input.quantity").on("keypress keyup blur",function (event) {    
       $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });
2
Aravind Srinivas

Вот хорошее простое решение, которое мне нравится использовать:

function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true; 
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type="text" onkeypress="return numeric_only (event, this);" />

Объяснение:

Используя «event.which» - сначала определите, является ли это печатным символом. Если это не так, разрешите это (для таких вещей, как удаление и возврат). В противном случае объедините символ в конец строки и протестируйте его с помощью функции jQuery isNumeric. Это отнимает всю скуку от тестирования каждого отдельного персонажа, а также работает для сценариев вырезания/вставки.

Если вы хотите стать действительно симпатичным, вы можете создать новый тип ввода HTML. Давайте назовем его «числовым», чтобы у вас был тег:

<input type="numeric" />

который будет позволять только числовые символы. Просто добавьте следующую команду «document.ready»:

$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true; 
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

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

2
rexthestrange

Вы можете прикрепить к событию нажатие клавиши, а затем отфильтровать ключи в соответствии с тем, что вам нужно, например:

<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);"  type="text">

И фактический обработчик JavaScript будет:

function validateNUM(e,field)
{
    var key = getKeyEvent(e)
    if (specialKey(key)) return true;
    if ((key >= 48 && key <= 57) || (key == 46)){
        if (key != 46)
            return true;
        else{
            if (field.value.search(/\./) == -1 && field.value.length > 0)
                return true;
            else
                return false;
        }
    }

function getKeyEvent(e){
    var keynum
    var keychar
    var numcheck
    if(window.event) // IE
        keynum = e.keyCode
    else if(e.which) // Netscape/Firefox/Opera
        keynum = e.which
    return keynum;
}
2
Alex Shnayder

Присвойте полю ввода класс (<input class="digit" ...>) и используйте jquery, как показано ниже.

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

Вышеприведенный код также работает для отключения специальных символов в штрихах Ctrl+V и штрихах right click.

2
Prasanna Kumar

Помните о региональных различиях (в евро используются точки и запятые в обратном порядке, как у американцев), плюс знак минус (или условное обозначение числа в круглых скобках для обозначения отрицательного числа), плюс экспоненциальная запись (на этом я остановился).

2
MusiGenesis

Вы можете заменить функцию Shurok на:

$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});
2
KapitanX

Мое решение для лучшего пользовательского опыта:

HTML

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

Подробности:

Прежде всего, типы ввода:

number показывает стрелки вверх/вниз, уменьшающие фактическое пространство ввода, я нахожу их уродливыми и полезными, только если число представляет количество (такие вещи, как телефоны, коды городов, идентификаторы ... не нуждаются в них) tel обеспечивает аналогичные браузер проверяет число без стрелок

Использование [номер/телефон] также помогает отображать цифровую клавиатуру на мобильных устройствах.

Для проверки JS мне понадобились 2 функции: одна для обычного пользовательского ввода (нажатие клавиши), а другая для исправления (изменения) копирования и вставки, другие комбинации дали бы мне ужасный пользовательский опыт.

Я использую более надежноKeyboardEvent.key вместо сейчас не рекомендуетсяKeyboardEvent.charCode

И в зависимости от поддержки вашего браузера вы можете рассмотреть возможность использования Array.prototype.includes () вместо плохо названного Array.prototype.indexOf () (для результатов true/false)

2
mencargo

Код ниже также проверит событиеPASTE.
Раскомментируйте "ruleSetArr_4" и добавьте (concate) в "ruleSetArr", чтобы разрешитьПЛАВАТЬчисла.
Простая функция копирования/вставки. Вызовите его с вашим входным элементом в параметре.
Пример: inputIntTypeOnly($('input[name="inputName"]'))

function inputIntTypeOnly(Elm){
    Elm.on("keydown",function(event){
        var e = event || window.event,
            key = e.keyCode || e.which,
            ruleSetArr_1 = [8,9,46], // backspace,tab,delete
            ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57],	// top keyboard num keys
            ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
            ruleSetArr_4 = [17,67,86],	// Ctrl & V
          //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
            ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);	// merge arrays of keys
		
            if(ruleSetArr.indexOf() !== "undefined"){	// check if browser supports indexOf() : IE8 and earlier
                var retRes = ruleSetArr.indexOf(key);
            } else { 
                var retRes = $.inArray(key,ruleSetArr);
            };
            if(retRes == -1){	// if returned key not found in array, return false
                return false;
            } else if(key == 67 || key == 86){	// account for paste events
                event.stopPropagation();
            };

    }).on('paste',function(event){
        var $thisObj = $(this),
            origVal = $thisObj.val(),	// orig value
            newVal = event.originalEvent.clipboardData.getData('Text');	// paste clipboard value
        if(newVal.replace(/\D+/g, '') == ""){	// if paste value is not a number, insert orig value and ret false
            $thisObj.val(origVal);
            return false;
        } else {
            $thisObj.val(newVal.replace(/\D+/g, ''));
            return false;
        };
		
    });
};

var inptElm = $('input[name="inputName"]');

inputIntTypeOnly(inptElm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="inputName" value="1">

2
crashtestxxx

Я использую библиотеку jquery.inputmask.js, которую вы можете скачать с NuGet . Более конкретно, я использую jquery.inputmask.regex.extensions.js, который поставляется вместе с ней.

Я даю элементу ввода класс, в данном случае reg:

<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

И тогда в JavaScript я устанавливаю маску:

var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

Это только для цифр, но вы можете изменить регулярное выражение, чтобы принять «.».

Используя это, невозможно вводить символы, которые не являются цифрами .... Полезно иметь эти библиотеки масок ввода для общего форматирования.

2
arame3333

Еще один простой способ с JQuery:

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

Теперь просто установите для каждого класса входных данных значение Numeric, например:

<input type="text" id="inp2" name="inp2" class='Numeric' />
1
Ali Mahami

Для тех из вас, кто любит однострочники .

string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

Я использую этот код для ввода type = "text" и с AngularJS для активации при нажатии клавиш, но вы можете использовать jQuery, если хотите. Просто поместите этот код в функцию, которая каким-то образом активируется при нажатии клавиши.

Это позволяет только цифры, цифры + десятичные, цифры + десятичные + цифры.

КОД

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";

testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";

testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";

testFour = "622632463.23464236326324363"
=> "622632463.23";

Это было построено для валюты США, но его можно изменить, чтобы разрешить более двух знаков после первого знака после запятой, как показано ниже ...

ИЗМЕНЕННЫЙ КОД

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');

testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";

:)

1
SoEzPz
function digitsOnly(obj) {
   obj.value = obj.value.replace(/\D/g, "");
}

и в элементе

<input type="text" onkeyup="digitsOnly(this);" />
1
kombi

Да, HTML5 делает. Попробуйте этот код ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>
1
Gagan Gami

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

$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
1
wezten

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

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

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

1
Sicha

Я немного его подправил, но для того, чтобы соответствовать принципу JavaScript, нужно еще много работы.

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

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

И тогда это называется через:

$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});
1
Phillip Senn

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

Попробуйте: https://jsfiddle.net/83va5sb9/

      <input min="1" type="text" id="quantity" name="quantity" value="1"
      onKeyUp="numbersonly()">

      <script>
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr = ""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr == "") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

    </script>
0
Chris Martin

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

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}
0
user3005331

Вы можете попробовать использовать событие '' 'onkeydown' '' и отменить событие (event.preventDefault или что-то в этом роде), когда оно не является одним из разрешенных ключей.

0
mbillard

Вызывайте эту функцию, когда будете готовы что-либо проверить. Я использовал текстовое поле здесь

В моем HTML:

<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

В моем коде JavaScript:

function check(num){
    var onlynumbers = true
    for (var i = 0; i < (num.length - 1); i++) {
        if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
            alert("please make sure that only numbers have been entered in the Quantaty box");
            onlynumbers = false
        }
    }
    if (onlynumbers == true) {

        //Execute Code
    }
}
0
Baladash

Вот очень короткое решение, которое не использует устаревшие keyCode или which, не блокирует никакие не входящие ключи и использует чистый javascript. (Проверено в Chromium 70.0.3533, Firefox 62.0 и Edge 42.17134.1.0)

HTML:

<input type="text" onkeypress="validate(event)">

JS:

function validate(ev) {
    if (!ev) {
        ev = window.event;
    }

    if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
        return ev.preventDefault();
    }
}
0
Prime_Aqasix

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

Мне просто нужно ввести его в событие onkeypress.

Если вам нужно просто заблокировать ввод чисел, я считаю, что это будет работать нормально.

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
0
Edson Cezar

Я понимаю старый пост, но я подумал, что это может кому-то помочь. Недавно мне пришлось ограничить текстовое поле до 5 десятичных знаков. В моем случае ТАКЖЕ пользовательский ввод должен быть меньше 0,1

<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

Вот функция doCheck

function doCheck(id,evt)
{
    var temp=parseFloat($(id).val());

    if (isNaN(temp))
        temp='0.0';
    if (temp==0)
        temp='0.0';

    $(id).val(temp);
}

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

function doCheck(id,evt)
{
    var temp=parseInt($(id).val());

    if (isNaN(temp))
        temp='0';

    $(id).val(temp);
}

надеюсь, что это помогает кому-то

0
ladieu

Я закончил использовать эту функцию:

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) return false;"

Это хорошо работает в IE и ​​Chrome, я не знаю, почему это не очень хорошо работает и в Firefox, эта функция блокирует клавишу табуляции в Firefox.

Чтобы клавиша Tab работала нормально в Firefox, добавьте это:

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
0
Edson Cezar

Когда дело доходит до защиты от дурака UX, всегда следует стараться сохранять ориентир для «интеллекта пользователя».

Пренебрегая всем, кроме чисел, точка и дефис кажутся идеальным выбором, вы также должны подумать о том, чтобы позволить им вводить любой контент, а когда они закончат, очистить ввод; если не верный номер, показать ошибку . Этот метод гарантирует, что независимо от того, что пользователю удастся сделать, результат всегда будет действительным. Если пользователь достаточно наивен, чтобы не понимать предупреждения и сообщения об ошибках, нажатие кнопки и видение того, что ничего не происходит (как в сравнении кодов клавиш), только еще больше запутает его/ее.

Кроме того, для форм проверка и отображение сообщений об ошибках практически необходимы. Таким образом, положения могут быть уже там. Вот алгоритм:

  1. При потере фокуса или отправке формы сделайте следующее.

    1.1. Считайте содержимое с ввода и примените parseFloat к результату.

    1.2. Если результатом является номер недоступный (NaN), сбросьте поле ввода и откройте сообщение об ошибке : «Пожалуйста, введите правильный номер: Например, 235 или -654 или 321.526 или - 6352.646584" .

    1.3. Иначе, если String (результат)! == (содержимое из ввода), измените значение поля для результата и покажите предупреждающее сообщение : "Введенное вами значение Было изменено. Ввод должен быть действительным числом : например, 235 или -654 или 321.526 или -6352.646584 ". Для поля, которое не может разрешить какое-либо неподтвержденное значение, тогда это условие может быть добавлено к шагу 1.2.

    1.4. Остальное, ничего не делай.

Этот метод также дает вам дополнительное преимущество выполнения проверок на основе минимального значения, максимального значения, десятичных разрядов и т.д. при необходимости. Просто нужно сделать эти операции над результатом после шага 1.2.

Недостатки:

  1. Ввод позволит пользователю вводить любое значение, пока фокус не будет потерян или форма не будет отправлена. Но если инструкции по заполнению поля были достаточно ясными, в 90% случаев это может не сработать.

  2. Если шаг 1.3 используется для отображения предупреждения, оно может быть пропущено пользователем и может привести к непреднамеренной отправке ввода. Если вы сгенерируете ошибку или отобразите предупреждение правильно, это решит проблему.

  3. Скорость. Это может быть медленнее в микросекундах, чем метод регулярных выражений.

Преимущества: Предполагая, что пользователь имеет базовые знания, чтобы читать и понимать,

  1. Высоко настраиваемый с опциями.

  2. Работает кросс-браузер и не зависит от языка.

  3. Использует уже имеющиеся функции в форме для отображения ошибок и предупреждений.

0
BlackPanther

это также работает для персидского и арабского номера :)

 setNumericInput: function (event) {
          var key = window.event ? event.keyCode : event.which
          if (event.keyCode === 8 ||
        (key >= 48 && key <= 57) ||
        (key >= 1776 && key <= 1785)) {
            return true
          } else {
            event.preventDefault()
          }
        }
0
hamid keyhani