Làm cách nào để tạo thẻ đầu vào HTML chỉ chấp nhận giá trị số?

143

Tôi cần đảm bảo rằng một <input>trường nhất định chỉ lấy số làm giá trị. Đầu vào không phải là một phần của một hình thức. Do đó, nó không được gửi, vì vậy xác nhận trong khi gửi không phải là một lựa chọn. Tôi muốn người dùng không thể nhập bất kỳ ký tự nào ngoài số.

Có một cách gọn gàng để đạt được điều này?

html  input  numbers  validating 
— Chiel mười Brinke
nguồn
— trộm
2
Hãy xem [link] [1] này, có đủ thông tin. [1]: stackoverflow.com/questions/469357/
— Mạnh
Điều này cũng có thể có ích: stackoverflow.com/questions/995183/ từ
— Chiel ten Brinke
Bản sao văn bản HTML
— emkey08

Câu trả lời:

282

HTML 5

Bạn có thể sử dụng số loại đầu vào HTML5 để chỉ hạn chế các mục nhập số:

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

Điều này sẽ chỉ hoạt động trong trình duyệt khiếu nại HTML5. Hãy chắc chắn rằng loại tài liệu html của bạn là:

<!DOCTYPE html>

Xem thêm https://github.com/jonstipe/number-polyfill để được hỗ trợ minh bạch trong các trình duyệt cũ hơn.

JavaScript

Cập nhật: Có một giải pháp mới và rất đơn giản cho việc này:

Nó cho phép bạn sử dụng bất kỳ loại bộ lọc đầu vào nào trên một văn bản <input>, bao gồm các bộ lọc số khác nhau. Điều này sẽ xử lý chính xác Sao chép + Dán, Kéo + Thả, phím tắt, thao tác menu ngữ cảnh, các phím không thể gõ và tất cả các bố cục bàn phím.

Xem câu trả lời này hoặc tự mình thử nó trên JSFiddle .

Đối với mục đích chung, bạn có thể có xác thực JS như dưới đây:

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

Nếu bạn muốn cho phép số thập phân thay thế "if condition" bằng điều này:

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

Nguồn: Nhập văn bản HTML chỉ cho phép nhập số

Bản demo của JSFiddle: http://jsfiddle.net/viruspatel/nSjy7/

— Viral Patel
nguồn
6
Đúng, điều này làm việc cho tôi trong cả firefox và chrome. Thật kỳ lạ khi js là cần thiết cho một điều đơn giản như vậy.
— Chiel ten Brinke
7
Không hoạt động trong chrome 30. Tôi không gặp khó khăn gì khi nhập các chữ cái vào đầu vào "số" của bạn trong fiddle. Hmmm ...
— Ben
2
Nếu ai đó muốn nhập giá trị float như 8,9 thì sao?
— syed shah
6
Đối với một giải pháp mạnh mẽ hơn, cũng xem xét sao chép và dán có thể thêm chữ cái vào ví dụ này!
— Neil
3
Giáo sư!! dòng đầu tiên phải đổi thành:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

Bạn cũng có thể sử dụng thuộc tính mẫu trong html5:

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

Hướng dẫn xác nhận đầu vào

Mặc dù, nếu doctype của bạn không như vậy htmlthì tôi nghĩ bạn sẽ cần sử dụng một số javascript / jquery.

— martincarlin87
nguồn
3
Mặc dù firefox cung cấp cho hộp đầu vào một viền màu đỏ khi không nhập số, nhưng trong cả firefox và chrome, bạn có thể nhập các ký tự không số trong hộp nhập.
— Chiel ten Brinke
bạn đang sử dụng loại tài liệu nào trên trang của mình?
— martincarlin87
ok, có lẽ nó không được hỗ trợ trong các phiên bản trình duyệt bạn có? Không chắc chắn 100% nhưng thành thật mà nói, tôi sử dụng một số js để xác thực, tôi sẽ không hoàn toàn dựa vào html5 vào lúc này
— martincarlin87
7
tài sản cho phép bạn nhập số nhưng không gửi biểu mẫu.
— My1
1
ĐĂNG KÝ GIÁ TRỊ CHỈ!
— Eric Hodonsky
16

Mã nhanh chóng và dễ dàng

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

Điều này sẽ chỉ cho phép sử dụng số và backspace.

Nếu bạn cũng cần phần thập phân, hãy sử dụng đoạn mã này

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
— abhijithvijaya
nguồn
13

Vui lòng thử mã này cùng với trường đầu vào

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

nó sẽ hoạt động tốt

— chiều tối
nguồn
Làm thế nào để xóa backspace?
— 6by3
7

Bạn có thể sử dụng một <input type="number" /> . Điều này sẽ chỉ cho phép các số được nhập vào hộp đầu vào.

Ví dụ: http://jsfiddle.net/SPqY3/

Xin lưu ý rằng đầu vào type="number" thẻ chỉ được hỗ trợ trong các trình duyệt mới hơn.

Đối với firefox, bạn có thể xác thực đầu vào bằng cách sử dụng javascript:

http://jsfiddle.net/VmtF5/

Cập nhật 2018-03-12: Hiện tại hỗ trợ trình duyệt đã tốt hơn rất nhiều.

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Cạnh
  • (Internet Explorer 10+)
— starbeamrainbowlabs
nguồn
1
Nó dường như hoạt động rất độc đáo trong chrome, nhưng không phải trong firefox.
— Chiel ten Brinke
Ah. Đó là bởi vì firefox không hỗ trợ kiểu đầu vào = số. Ngoài ra, bạn có thể sử dụng một số javascript để xác thực đầu vào khi người dùng nhập văn bản. Trả lời cập nhật.
— starbeamrainbowlabs
Các jscript trên jsfiddle.net/VmtF5 , cũng sẽ không hoạt động. Ngay cả khi 1 chữ số ở đầu ký tự, xác thực thất bại. Hãy tự thử trên jsfiddle
— Akshay
@aarn Nó hoạt động với tôi (xem i.imgur.com/AWdmEov.png ), bạn đang sử dụng trình duyệt nào?
— starbeamrainbowlabs
@starbeamrainbowlabs Tôi đang sử dụng firefox. Ngoài ra, nhập 6abc, nó sẽ không hiển thị cho bạn lỗi
— Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

và trong js:

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

hoặc bạn có thể viết nó theo cách hữu ích bu phức tạp:

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

Lưu ý : trình duyệt chéo và regex theo nghĩa đen.

— Fredrick Gauss
nguồn
Làm thế nào bạn có thể thêm khả năng để đặt đầu vào như .5 hoặc .3?
— dùng3591637
Sau đó, bạn phải xem xét các ký tự đầu tiên và thứ hai ( 0.43hoặc .43) có thể được thực hiện bằng cách kiểm tra giá trị của đầu vào hiện tại cộng với phím được nhấn. Điều này sẽ là xấu trong mã một dòng, tôi khuyên bạn nên sử dụng một chức năng cho việc này. Để kiểm tra số nguyên hoặc float, kiểm tra ở đây .
— Fredrick Gauss
1
bạn không thể xóa một số được nhập do nhầm lẫn
— Chris Sim
5

Tôi đã sử dụng biểu thức chính quy để thay thế giá trị đầu vào bằng mẫu cần thiết.

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">
Mở rộng đoạn trích

— Shaktish
nguồn
1
Đó là lý do tại sao tôi yêu regex. Cảm ơn, anh bạn, bạn thực sự đã cứu ngày của tôi
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup kích hoạt khi khóa được phát hành.

isNaN(parseFloat(value))? kiểm tra nếu giá trị đầu vào không phải là một số.

Nếu nó không phải là một số, giá trị được đặt thành 1000 :Nếu đó là một số, giá trị được đặt thành giá trị.

lưu ý: Vì một số lý do, nó chỉ hoạt động vớitype="number"

Để làm cho nó thoát hơn nữa, bạn cũng có thể có một ranh giới:

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

Thưởng thức!

— người dùng40521
nguồn
4

Tôi đã chiến đấu với cái này một chút. Nhiều giải pháp ở đây và những nơi khác có vẻ phức tạp. Giải pháp này sử dụng jQuery / javascript cùng với 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);
    });

Trong trường hợp của tôi, tôi đã theo dõi số lượng nhỏ với giá trị tối thiểu là 1, do đó min = "1" trong thẻ đầu vào và abc = 1 trong kiểm tra isNaN (). Đối với các số chỉ dương, bạn có thể thay đổi các giá trị đó thành 0 và thậm chí chỉ cần xóa min = "1" khỏi thẻ đầu vào để cho phép các số âm.

Ngoài ra, điều này hoạt động cho nhiều hộp (và có thể giúp bạn tiết kiệm thời gian tải hơn khi thực hiện chúng theo id), chỉ cần thêm lớp "validateNumber" khi cần.

Giải trình

parseInt () về cơ bản thực hiện những gì bạn cần, ngoại trừ việc nó trả về NaN chứ không phải một số giá trị nguyên. Với một if () đơn giản, bạn có thể đặt giá trị "dự phòng" mà bạn thích trong tất cả các trường hợp NaN được trả về :-). Cũng W3 khẳng định đây là phiên bản toàn cầu của NaN sẽ gõ dàn diễn viên trước khi kiểm tra mà cho phép thêm một số kiểm chứng (Number.isNaN () không làm điều đó). Bất kỳ giá trị nào được gửi đến máy chủ / phụ trợ vẫn phải được xác thực ở đó!

— Ê-sai
nguồn
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);" />
Mở rộng đoạn trích

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

— Sameh Saeed
nguồn
1
Khi bạn dán một giá trị có chứa văn bản, nó sẽ cho phép nó
— Chris Sim
1
Nó cho phép các nhân vật đặc biệt là tốt. Ví dụ: á, ã, ê, ó, è, v.v.
— MostPitt
3

nếu bạn có thể sử dụng HTML5, bạn có thể làm <input type="number" /> Nếu không, bạn sẽ phải làm điều đó thông qua javascript như bạn đã nói, nó không được gửi để làm điều đó từ 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 đã không kiểm tra mã nhưng nó sẽ ít nhiều đúng nếu không kiểm tra lỗi chính tả: D Bạn có thể muốn thêm một vài thứ như phải làm gì nếu chuỗi rỗng hoặc trống, v.v. Ngoài ra, bạn có thể thực hiện nhanh hơn: D

— czioutas
nguồn
2

nếu không đặt số nguyên 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
nguồn
2

Câu trả lời được chấp nhận:

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

Nó tốt nhưng không hoàn hảo. Nó hoạt động với tôi, nhưng tôi nhận được một cảnh báo rằng câu lệnh if có thể được đơn giản hóa.

Sau đó, nó trông như thế này, đó là cách đẹp hơn:

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

Sẽ bình luận bài viết gốc, nhưng danh tiếng của tôi quá thấp để làm điều đó (chỉ cần tạo tài khoản này).

— Chris H.
nguồn
2

Bạn có thể sử dụng <input>thẻ với loại thuộc tính = 'số'.

Ví dụ bạn có thể sử dụng <input type='number' />

Trường đầu vào này chỉ cho phép các giá trị số. Bạn cũng có thể chỉ định giá trị tối thiểu và giá trị tối đa nên được trường này chấp nhận.

— Geeth Chadalawada
nguồn
2

Vui lòng xem dự án của tôi về bộ lọc chéo trình duyệt giá trị của phần tử nhập văn bản trên trang web của bạn bằng ngôn ngữ JavaScript: Bộ lọc khóa đầu vào . Bạn có thể lọc giá trị dưới dạng số nguyên, số float hoặc viết bộ lọc tùy chỉnh, chẳng hạn như bộ lọc số điện thoại. Xem ví dụ về mã đầu vào một số nguyên:

<!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>
Mở rộng đoạn trích

Đồng thời xem trang "Trường số nguyên:" của ví dụ về bộ lọc khóa đầu vào

— Andrej
nguồn
2

Đối với mục đích chung, bạn có thể có xác thực JS như dưới đây:

Nó sẽ hoạt động cho bàn phím số và phím số bình thường 

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
nguồn
2

Thêm vào bên trong thẻ đầu vào của bạn: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
nguồn
2
Chào mừng đến với SO! Thật không may, đây là một câu hỏi 5 năm rưỡi đã có câu trả lời được chấp nhận. Bạn có thể muốn duyệt các câu hỏi mà không có câu trả lời tại đây: stackoverflow.com/unanswered
— AndroidNoobie
2

Tôi đã cập nhật một số câu trả lời được đăng để thêm vào như sau:

  • Thêm phương thức làm phương thức mở rộng
  • Chỉ cho phép một điểm được nhập

  • Chỉ định có bao nhiêu số sau dấu thập phân được phép.

    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
nguồn
1

Tôi sử dụng điều này cho Mã Zip, nhanh chóng và dễ dàng.

<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
nguồn
1

Khi sử dụng mã này, bạn không thể sử dụng "Nút BackSpace" trong Mozilla Firefox, bạn chỉ có thể sử dụng backspace trong Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "bắt buộc>

— Wendell Alvarez
nguồn
0

Tốt hơn là thêm "+" vào điều kiện REGEX để chấp nhận nhiều chữ số (không chỉ một chữ số):

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

— Dashko Leonid
nguồn
0

Một cách có thể là có một mảng mã ký tự được phép và sau đó sử dụng Array.includeshàm để xem ký tự đã nhập có được phép hay không.

Thí dụ:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
nguồn
0

Đủ đơn giản?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Mở rộng đoạn trích

— Normajean
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.