Как сделать тег ввода HTML только принимать числовые значения?

вы также можете использовать атрибут pattern в html5:

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

http://www.pageresource.com/html5/input-validation-tutorial/

хотя, если ваш doctype не html тогда я думаю, что вам нужно будет использовать некоторые javascript/jquery.

пожалуйста, попробуйте этот код вместе с самим полем ввода

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

он будет работать нормально.

можно использовать <input type="number" />. Это позволит только ввести номера в другое поле ввода.

Пример:http://jsfiddle.net/SPqY3/

обратите внимание, что вход type="number" тег поддерживается только в новых браузерах.

для firefox вы можете проверить ввод с помощью javascript:

http://jsfiddle.net/VmtF5/

обновление 2018-03-12: поддержка браузера теперь намного лучше поддерживается следующим:

• Chrome 6+
• Firefox 29+
• Opera 10.1+
• Safari 5+
• края
• (Internet Explorer 10+)

function AllowOnlyNumbers(e) {

    e = (e) ? e : window.event;
    var key = null;
    var charsKeys = [
        97, // a  Ctrl + a Select All
        65, // A Ctrl + A Select All
        99, // c Ctrl + c Copy
        67, // C Ctrl + C Copy
        118, // v Ctrl + v paste
        86, // V Ctrl + V paste
        115, // s Ctrl + s save
        83, // S Ctrl + S save
        112, // p Ctrl + p print
        80 // P Ctrl + P print
    ];

    var specialKeys = [
    8, // backspace
    9, // tab
    27, // escape
    13, // enter
    35, // Home & shiftKey +  #
    36, // End & shiftKey + $
    37, // left arrow &  shiftKey + %
    39, //right arrow & '
    46, // delete & .
    45 //Ins &  -
    ];

    key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

    //console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode);
    //console.log(String.fromCharCode(key));

    // check if pressed key is not number 
    if (key && key < 48 || key > 57) {

        //Allow: Ctrl + char for action save, print, copy, ...etc
        if ((e.ctrlKey && charsKeys.indexOf(key) != -1) ||
            //Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser
            (navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) {
            return true
        }
            // Allow: Special Keys
        else if (specialKeys.indexOf(key) != -1) {
            //Fix Issue: right arrow & Delete & ins in FireFox
            if ((key == 39 || key == 45 || key == 46)) {
                return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0);
            }
                //DisAllow : "#" & "$" & "%"
            else if (e.shiftKey && (key == 35 || key == 36 || key == 37)) {
                return false;
            }
            else {
                return true;
            }
        }
        else {
            return false;
        }
    }
    else {
        return true;
       }
    }

<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />

<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup срабатывает при отпускании ключа.

isNaN(parseFloat(value))? проверяет, не является ли входное значение числом.

если это не число, то значение равно 1000 : если это число, то значение устанавливается в значение.

Примечание: почему-то он работает только с type="number"

чтобы сделать его еще более увлекательным, вы также можете иметь границы:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

наслаждайтесь!

Я боролся с этим немного. Многие решения здесь и в других местах казались сложными. Это решение использует jQuery / javascript рядом с HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

в моем случае я отслеживал небольшие количества с минимальным значением 1, следовательно, min= " 1 " во входном теге и abc = 1 в проверке isNaN (). Для положительных только чисел вы можете изменить эти значения на 0 и даже просто удалить min="1" из входного тега, чтобы разрешить отрицательные числа.

также это работает для нескольких ящиков (и может сэкономить вам некоторое время загрузки, делая их по отдельности по id), просто добавьте класс "validateNumber", где это необходимо.

объяснение

parseInt () в основном делает то, что вам нужно, за исключением того, что он возвращает NaN, а не какое-то целое значение. С помощью простого if () вы можете установить "резервное" значение, которое вы предпочитаете во всех случаях NaN возвращается: -). Также W3 состояния здесь что глобальная версия NaN наберет cast перед проверкой, которая дает некоторые дополнительные проверки (номер.isNaN() не делает этого). Любые значения, отправленные на сервер / серверную часть, все равно должны быть проверены там!

<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

и в js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

или вы можете написать его в сложную бу удобным способом:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Примечание: кросс-браузер и регулярное выражение в литерале.

Если вы можете использовать HTML5, вы можете сделать <input type="number" /> Если нет, вам придется либо сделать это через javascript, как вы сказали, он не будет отправлен, чтобы сделать это из codebehind.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

P. S Не проверял код, но он должен быть более или менее правильным, если не проверять опечатки :D Вы можете добавить еще несколько вещей, например, что делать, если строка пуста или пуста и т. д. Также вы можете сделать это быстрее :D

Как насчет использования <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

кроме того, здесь вопрос, который имеет некоторые примеры использования Javascript для проверки.

обновление: связано с лучшим вопросом (спасибо alexblum).

если не целое число 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });

принято отвечать:

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

это хорошо, но не идеально. Это работает для меня, но я получаю предупреждение, что if-заявление может быть упрощено.

тогда это выглядит так, что красивше:

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

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

можно использовать <input> тег с атрибутом type= 'number'.

например, вы можете использовать <input type='number' />

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

смотрите мой проект кроссбраузерного фильтра значения элемента ввода текста на вашей веб-странице с помощью языка JavaScript: Входной Ключевой Фильтр . Можно отфильтровать значение как целое число, число с плавающей запятой или написать пользовательский фильтр, например фильтр номера телефона. См. пример кода ввода целого числа:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>

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

добавить внутри вашего входного тега: onkeyup= " значение=значение.заменить (/[^\d] / g,")"

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

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>

при использовании этого кода Вы не можете использовать "кнопку BackSpace" в Mozilla Firefox вы можете использовать только backspace в Chrome 47 && event.charCode

http://www.texotela.co.uk/code/jquery/numeric/ цифровой ввод кредиты Лео Vũ для упоминания этого и, конечно, TexoTela. с тестовой страницы.

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

Он будет работать для цифровой клавиатуры и обычной цифровой клавиши

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

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

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

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  

<input type="text" id="numberField">

лучше добавить " + " к условию регулярного выражения, чтобы принять несколько цифр (а не только одну цифру):

<input type="text" name="your_field" pattern="[0-9]+">