วิธีทำให้แท็กอินพุต HTML ยอมรับเฉพาะตัวเลขเท่านั้น

143

ฉันต้องตรวจสอบให้แน่ใจว่า<input>เขตข้อมูลหนึ่งใช้ตัวเลขเป็นค่าเท่านั้น อินพุตไม่ได้เป็นส่วนหนึ่งของแบบฟอร์ม ดังนั้นจึงไม่ได้รับการส่งดังนั้นการตรวจสอบในระหว่างการส่งจึงไม่ใช่ตัวเลือก ฉันต้องการให้ผู้ใช้พิมพ์อักขระอื่น ๆ ที่ไม่ใช่ตัวเลข

มีวิธีที่เป็นระเบียบเพื่อให้บรรลุสิ่งนี้หรือไม่?

html  input  numbers  validating 
— Chiel ten Brinke
แหล่งที่มา
— alexblum
2
ลองดูที่ [ลิงค์] [1] ซึ่งมีข้อมูลเพียงพอ [1]: stackoverflow.com/questions/469357/…
— Maheshkumar
อันนี้อาจมีประโยชน์: stackoverflow.com/questions/995183/ …
— Chiel ten Brinke
— emkey08

คำตอบ:

282

HTML 5

คุณสามารถใช้หมายเลขประเภทอินพุต HTML5เพื่อ จำกัด การป้อนเฉพาะตัวเลข:

<input type="number" name="someid" />

สิ่งนี้จะทำงานในเบราว์เซอร์การร้องเรียน HTML5 เท่านั้น ตรวจสอบให้แน่ใจว่าเอกสารประเภท html ของคุณคือ:

<!DOCTYPE html>

ดูเพิ่มเติมที่https://github.com/jonstipe/number-polyfillสำหรับการสนับสนุนที่โปร่งใสในเบราว์เซอร์รุ่นเก่า

JavaScript

อัปเดต:มีโซลูชันใหม่และง่ายมากสำหรับสิ่งนี้:

อนุญาตให้คุณใช้ตัวกรองอินพุตชนิดใดก็ได้บนข้อความ<input>รวมถึงตัวกรองตัวเลขต่างๆ สิ่งนี้จะจัดการคัดลอก + วางลาก + วางแป้นพิมพ์ลัดการใช้งานเมนูบริบทปุ่มที่ไม่สามารถพิมพ์ได้และเค้าโครงแป้นพิมพ์ทั้งหมดอย่างถูกต้อง

ดูคำตอบนี้หรือลองด้วยตัวคุณเองใน JSFiddle

เพื่อวัตถุประสงค์ทั่วไปคุณสามารถตรวจสอบ JS ได้ดังต่อไปนี้:

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

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

หากคุณต้องการอนุญาตให้ใช้ทศนิยมแทนที่ "if condition" ด้วยสิ่งนี้:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

ที่มา: การป้อนข้อความ HTML อนุญาตเฉพาะการป้อนตัวเลขเท่านั้น

การสาธิต JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

— Viral Patel
แหล่งที่มา
6
ใช่มันใช้ได้กับฉันทั้งใน Firefox และโครเมี่ยม แปลกที่ js เป็นสิ่งจำเป็นสำหรับสิ่งง่าย ๆ
— Chiel ten Brinke
7
ใช้งานไม่ได้กับ Chrome 30 ฉันไม่มีปัญหาในการพิมพ์ตัวอักษรทั้งหมดในอินพุต "number" ของคุณในซอ อืมม ...
— เบน
2
จะเป็นอย่างไรถ้ามีคนต้องการป้อนค่าทศนิยมเช่น 8.9
— syed shah
6
สำหรับโซลูชันที่มีประสิทธิภาพมากขึ้นลองใช้การคัดลอกและวางเพื่อเพิ่มตัวอักษรในตัวอย่างนี้!
— Neil
3
โอ๊ะ !! บรรทัดแรกต้องเปลี่ยนเป็น:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

คุณยังสามารถใช้แอตทริบิวต์ pattern ใน html5:

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

บทเรียนการตรวจสอบการป้อนข้อมูล

แม้ว่าถ้าประเภทของคุณไม่ได้htmlฉันคิดว่าคุณจะต้องใช้ javascript / jquery

— martincarlin87
แหล่งที่มา
3
แม้ว่า firefox จะให้กล่องอินพุตเป็นขอบสีแดงเมื่อไม่มีการพิมพ์ตัวเลขทั้งใน firefox และ chrome คุณสามารถพิมพ์อักขระที่ไม่ใช่ตัวเลขในกล่องอินพุตได้
— Chiel ten Brinke
คุณใช้ doctype ประเภทใดในหน้าเว็บของคุณ
— martincarlin87
ตกลงบางทีเวอร์ชั่นเบราว์เซอร์ที่คุณใช้อาจไม่รองรับ ไม่แน่ใจ 100% แต่จริงๆแล้วฉันใช้ js บางตัวเพื่อตรวจสอบความถูกต้องฉันจะไม่เชื่อมั่นใน html5 ในขณะนี้
— martincarlin87
7
คุณสมบัติช่วยให้คุณป้อนหมายเลข แต่ไม่ส่งแบบฟอร์ม
— My1
1
ส่งการยืนยันเท่านั้น!
— Eric Hodonsky
16

รหัสที่ง่ายและรวดเร็ว

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

วิธีนี้จะอนุญาตการใช้ตัวเลขและ Backspace เท่านั้น

หากคุณต้องการส่วนทศนิยมให้ใช้ส่วนรหัสนี้

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
— abhijithvijayan
แหล่งที่มา
13

โปรดลองรหัสนี้พร้อมกับช่องใส่ของตัวเอง

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

มันจะทำงานได้ดี

— subindas pm
แหล่งที่มา
วิธีการลบ Backspace แล้ว?
— 6by3
7

<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+)
— starbeamrainbowlabs
แหล่งที่มา
1
ดูเหมือนว่าจะทำงานได้ดีมากใน Chrome แต่ไม่ใช่ใน firefox
— Chiel ten Brinke
อา. นั่นเป็นเพราะ firefox ไม่รองรับ input type = number หรือคุณสามารถใช้จาวาสคริปต์เพื่อตรวจสอบอินพุตเมื่อผู้ใช้ป้อนข้อความ อัปเดตคำตอบแล้ว
— starbeamrainbowlabs
jscript บนjsfiddle.net/VmtF5จะไม่ทำงานเช่นกัน แม้ว่าตัวเลข 1 หลักจะเป็นจุดเริ่มต้นของอักขระการตรวจสอบจะล้มเหลว ลองด้วยตัวคุณเองใน jsfiddle
— Akshay
@aarn ใช้งานได้สำหรับฉัน (ดูi.imgur.com/AWdmEov.png ) คุณใช้เบราว์เซอร์ใด
— starbeamrainbowlabs
@ starbeamrainbowlabs ฉันกำลังใช้ Firefox นอกจากนี้ป้อน 6abc มันจะไม่แสดงข้อผิดพลาด
— Akshay
5 
<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));
}

หรือคุณสามารถเขียนมันในวิธีที่มีประโยชน์ bu ที่ซับซ้อน:

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

หมายเหตุ : cross-browser และ regex เป็นตัวอักษร

— เฟรดริกเกาส์
แหล่งที่มา
คุณจะเพิ่มความสามารถในการใส่อินพุตเช่น 0.5 หรือ. 3 ได้อย่างไร
— user3591637
จากนั้นคุณต้องพิจารณาอักขระตัวแรกและตัวที่สอง ( 0.43หรือ.43) ที่สามารถทำได้ด้วยการตรวจสอบค่าของอินพุตปัจจุบันบวกกับปุ่มกด นี่น่าเกลียดในรหัสบรรทัดเดียวผมแนะนำให้ใช้ฟังก์ชั่นนี้ จำนวนเต็มทดสอบหรือทุ่นตรวจสอบที่นี่
— Fredrick Gauss
1
คุณไม่สามารถลบหมายเลขที่ป้อนโดยไม่ได้ตั้งใจ
— Chris Sim
5

ฉันใช้นิพจน์ทั่วไปเพื่อแทนที่ค่าอินพุตด้วยรูปแบบที่ต้องการ

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">
ขยายตัวอย่างข้อมูล

— Shaktish
แหล่งที่มา
1
นั่นเป็นเหตุผลที่ฉันรัก regex ขอบคุณชายคุณช่วยชีวิตฉันได้อย่างแท้จริง
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup ทริกเกอร์เมื่อปล่อยกุญแจ

isNaN(parseFloat(value))? ตรวจสอบว่าค่าอินพุตไม่ใช่ตัวเลข

หากไม่ใช่ตัวเลขค่าจะถูกตั้งเป็น 1,000 :หากไม่ใช่ตัวเลขค่าจะถูกตั้งเป็นค่า

หมายเหตุ:ด้วยเหตุผลบางอย่างใช้งานได้เฉพาะกับtype="number"

หากต้องการออกให้มากยิ่งขึ้นคุณสามารถมีขอบเขต:

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

สนุก!

— user40521
แหล่งที่มา
4

ฉันต่อสู้กับอันนี้สักหน่อย การแก้ปัญหามากมายที่นี่และที่อื่น ๆ ดูเหมือนซับซ้อน วิธีนี้ใช้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 แทนที่จะเป็นค่าจำนวนเต็ม ด้วยง่ายๆถ้า () คุณสามารถตั้งค่า "ทางเลือก" ที่คุณต้องการในทุกกรณี NaN จะถูกส่งกลับ :-) นอกจากนี้ W3 ระบุไว้ที่นี่ว่าเวอร์ชันสากลของ NaN จะพิมพ์การส่งก่อนที่จะตรวจสอบซึ่งให้การพิสูจน์พิเศษเพิ่มเติม (Number.isNaN () ไม่ได้ทำเช่นนั้น) ค่าใด ๆ ที่ส่งไปยังเซิร์ฟเวอร์ / แบ็กเอนด์ควรจะยังคงตรวจสอบที่นั่น

— อิสยาห์
แหล่งที่มา
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
ขยายตัวอย่างข้อมูล

JSFiddle: https://jsfiddle.net/ug8pvysc/

— Sameh Saeed
แหล่งที่มา
1
เมื่อคุณวางค่าที่มีข้อความมันจะอนุญาต
— Chris Sim
1
มันช่วยให้ตัวละครพิเศษเช่นกัน ตัวอย่างเช่น: á, ã, ê, ó, è, ฯลฯ
— เกือบPitt
3

ถ้าคุณสามารถใช้ 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;
}

PS ไม่ได้ทดสอบโค้ด แต่มันควรจะมากหรือน้อยถ้าไม่ถูกต้องตรวจสอบความผิดพลาด: D คุณอาจต้องการเพิ่มอีกหลายอย่างเช่นจะทำอย่างไรถ้าสตริงเป็นโมฆะหรือว่างเปล่าเป็นต้นนอกจากนี้คุณสามารถทำให้เร็วขึ้น: D

— czioutas
แหล่งที่มา
2

วิธีการเกี่ยวกับการใช้งาน<input type="number"...>?

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

และนี่คือคำถามที่มีตัวอย่างบางส่วนของการใช้ Javascript สำหรับการตรวจสอบสำหรับการตรวจสอบ

อัปเดต: เชื่อมโยงกับคำถามที่ดีกว่า (ขอบคุณ alexblum)

— dan1111
แหล่งที่มา
2

ถ้าไม่ใช่ชุดจำนวนเต็ม 0

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

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— websky
แหล่งที่มา
2

คำตอบที่ได้รับการยอมรับ:

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

จะแสดงความคิดเห็นโพสต์ต้นฉบับ แต่ชื่อเสียงของฉันต่ำเกินไปที่จะทำเช่นนั้น (เพิ่งสร้างบัญชีนี้)

— Chris H.
แหล่งที่มา
2

คุณสามารถใช้ <input>แท็กพร้อมกับ attribute type = 'number'

ตัวอย่างเช่นคุณสามารถใช้ <input type='number' />

ฟิลด์อินพุตนี้อนุญาตเฉพาะค่าตัวเลข คุณยังสามารถระบุค่าต่ำสุดและค่าสูงสุดที่ควรได้รับการยอมรับจากฟิลด์นี้

— เกตุชฎาธาดา
แหล่งที่มา
2

โปรดดูโครงการของฉันของตัวกรองเบราว์เซอร์ของมูลค่าขององค์ประกอบการป้อนข้อความบนหน้าเว็บของคุณโดยใช้ภาษาจาวาสคริปต์: กรองคีย์การป้อนข้อมูล คุณสามารถกรองค่าเป็นหมายเลขจำนวนเต็มจำนวนลอยหรือเขียนตัวกรองแบบกำหนดเองเช่นตัวกรองหมายเลขโทรศัพท์ ดูตัวอย่างของรหัสการป้อนหมายเลขจำนวนเต็ม:

<!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>
ขยายตัวอย่างข้อมูล

โปรดดูหน้าของฉัน"ฟิลด์จำนวนเต็ม:" ของตัวอย่างของตัวกรองคีย์อินพุต

— Andrej
แหล่งที่มา
2

เพื่อวัตถุประสงค์ทั่วไปคุณสามารถตรวจสอบ 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)"/>
— YasirPoongadan
แหล่งที่มา
2

เพิ่มภายในแท็กอินพุตของคุณ: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
แหล่งที่มา
2
ยินดีต้อนรับสู่ SO! น่าเสียดายที่นี่เป็นคำถามอายุ 5 1/2 ปีที่มีคำตอบที่ยอมรับแล้ว คุณอาจต้องการเรียกดูคำถามโดยไม่มีคำตอบได้ที่นี่: stackoverflow.com/unanswered
— AndroidNoobie
2

ฉันอัพเดตคำตอบบางคำตอบแล้วเพื่อเพิ่มรายการต่อไปนี้:

  • เพิ่มวิธีเป็นวิธีส่วนขยาย
  • อนุญาตให้ป้อนเพียงหนึ่งจุดเท่านั้น

  • ระบุจำนวนตัวเลขหลังอนุญาตให้มีจุดทศนิยม

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
— Plexis Plexis
แหล่งที่มา
1

ฉันใช้สิ่งนี้เพื่อรหัสไปรษณีย์อย่างรวดเร็วและง่ายดาย

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— Justin Buser
แหล่งที่มา
0

การเพิ่ม "+" ลงในเงื่อนไข REGEX เพื่อรับตัวเลขหลายหลัก (ไม่ใช่เพียงหนึ่งหลัก):

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

— Dashko Leonid
แหล่งที่มา
0

วิธีหนึ่งอาจจะมีรหัสอักขระที่ได้รับอนุญาตจากนั้นใช้Array.includesฟังก์ชันเพื่อดูว่าอนุญาตให้ป้อนอักขระได้หรือไม่

ตัวอย่าง:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.