HTML giriş etiketinin yalnızca sayısal değerleri kabul etmesi nasıl sağlanır?

143

Belirli bir <input>alanın yalnızca sayı olarak değer aldığından emin olmalıyım . Giriş bir formun parçası değildir. Bu nedenle gönderilmez, bu nedenle gönderim sırasında onaylama bir seçenek değildir. Kullanıcının sayılardan başka bir karakter yazamamasını istiyorum.

Bunu başarmanın temiz bir yolu var mı?

html  input  numbers  validating 
— Chiel ten Brinke
kaynak
— alexblum
2
Yeterli bilgiye sahip olan bu [link] [1] 'e bir göz atın. [1]: stackoverflow.com/questions/469357/…
— Maheshkumar
Bu da kullanışlı olabilir: stackoverflow.com/questions/995183/…
— Chiel ten Brinke
— emkey08

Yanıtlar:

282

HTML 5

Sen kullanabilirsiniz HTML5 giriş tipi numarasını tek sayı girişlerini sınırlamak için:

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

Bu yalnızca HTML5 şikayet tarayıcısında çalışır. Html belgenizin dokümanı olduğundan emin olun:

<!DOCTYPE html>

Daha eski tarayıcılarda şeffaf destek için ayrıca bkz. Https://github.com/jonstipe/number-polyfill .

JavaScript

Güncelleme: Bunun için yeni ve çok basit bir çözüm var:

Çeşitli sayısal filtreler de dahil olmak üzere bir metin üzerinde her türlü giriş filtresini kullanmanızı sağlar <input>. Bu, Kopyala + Yapıştır, Sürükle + Bırak, klavye kısayolları, bağlam menüsü işlemleri, yazılamaz tuşlar ve tüm klavye düzenlerini doğru şekilde işler.

Bu cevabı görün veya JSFiddle'da kendiniz deneyin .

Genel amaçlı olarak, JS doğrulaması aşağıdaki gibi olabilir:

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

Ondalık sayılara izin vermek istiyorsanız, "if koşulunu" bununla değiştirin:

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

Kaynak: HTML metin girişi yalnızca sayısal girişe izin verir

JSFiddle demosu: http://jsfiddle.net/viralpatel/nSjy7/

— Viral Patel
kaynak
6
Evet, bu benim için hem firefox hem de chrome'da çalışıyor. Böyle basit bir şey için js gerekli garip.
— Chiel ten Brinke
7
Krom 30'da çalışmıyor. Kemandaki "sayı" girişinize harf yazarken hiç sorun yaşamıyorum. Hmmm ...
— Ben
2
Birisi 8.9 gibi kayan değer girmek isterse ne olur?
— syed shah
6
daha sağlam bir çözüm için, kopyala ve yapıştır işleminin bu örneğe harf ekleyebileceğini de düşünün!
— Neil
3
Hata !! ilk satır şu şekilde değiştirilmelidir:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

Html5'teki pattern özelliğini de kullanabilirsiniz:

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

Giriş doğrulama öğreticisi

Her ne kadar, eğer senin doctype değilse htmlo zaman bazı javascript / jquery kullanmanız gerektiğini düşünüyorum.

— martincarlin87
kaynak
3
Firefox, sayı olmayan karakterler yazıldığında giriş kutusuna kırmızı bir kenarlık verse de, hem firefox hem de chrome'da, giriş kutusuna sayı olmayan karakterler yazabilirsiniz.
— Chiel ten Brinke
sayfanızda hangi dokümanı kullanıyorsunuz?
— martincarlin87
tamam, belki de sahip olduğunuz tarayıcı sürümlerinde desteklenmiyordur? % 100 emin değilim ama dürüst olmak gerekirse ben de doğrulamak için bazı js kullanmak istiyorum, şu anda sadece html5 güvenmek olmaz
— martincarlin87
7
mülk numara girmenize izin verir, ancak formu göndermemenizi sağlar.
— MY1
1
SADECE DOĞRULAMA GÖNDER!
— Eric Hodonsky
16

Hızlı ve Kolay Kod

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

Bu, yalnızca sayıların ve geri almanın kullanılmasına izin verecektir.

Ondalık parçaya da ihtiyacınız varsa, bu kod parçasını kullanın

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

Lütfen bu kodu giriş alanının kendisiyle birlikte deneyin

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

iyi çalışır.

— subindas pm
kaynak
sonra geri silme nasıl?
— 6by3
7

Kullanabilirsiniz <input type="number" />. Bu yalnızca sayıların giriş kutusuna girilmesine izin verir.

Örnek: http://jsfiddle.net/SPqY3/

Giriş type="number"etiketinin yalnızca daha yeni tarayıcılarda desteklendiğini lütfen unutmayın .

Firefox için, javascript kullanarak girişi doğrulayabilirsiniz:

http://jsfiddle.net/VmtF5/

Güncelleme 2018-03-12: Tarayıcı desteği artık daha iyi:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1 ve üstü
  • Safari 5+
  • kenar
  • (Internet Explorer 10+)
— starbeamrainbowlabs
kaynak
1
Chrome'da çok güzel çalışıyor, ancak firefox'ta çalışmıyor gibi görünüyor.
— Chiel ten Brinke
Ah. Bunun nedeni, firefox'un input type = number girişini desteklememesidir. Alternatif olarak, kullanıcı metni girerken girişi doğrulamak için bazı javascript kullanabilirsiniz. Yanıt güncellendi.
— starbeamrainbowlabs
Jsfiddle.net/VmtF5 üzerindeki jscript de çalışmaz. 1 basamak karakterin başında olsa bile, doğrulama başarısız olur. Jsfiddle'da kendiniz deneyin
— Akshay
@aarn Benim için çalışıyor (bkz. i.imgur.com/AWdmEov.png ), hangi tarayıcıyı kullanıyorsunuz?
— starbeamrainbowlabs
@starbeamrainbowlabs Firefox kullanıyorum. Ayrıca, 6abc girin, size hata göstermez
— Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

ve js'de:

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

ya da karmaşık ve yararlı bir şekilde yazabilirsiniz:

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

Not : gerçek anlamda çapraz tarayıcı ve normal ifade.

— Fredrick Gauss
kaynak
.5 veya .3 gibi girdi koyma yeteneğini nasıl eklersiniz?
— user3591637
Ardından , geçerli girişin artı basılı tuşun değeri kontrol edilerek yapılabilecek birinci ve ikinci karakterleri ( 0.43veya .43) dikkate almanız gerekir . Bu tek satırlık kodda çirkin olurdu, bunun için bir işlev kullanmanızı öneririz. Tamsayıyı veya kayan yeri test etmek için buraya bakın .
— Fredrick Gauss
1
yanlışlıkla girilen bir numarayı silemezsiniz
— Chris Sim
5

Giriş değerini gerekli desenle değiştirmek için düzenli ifade kullandım.

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">
Snippet'i genişlet

— Shaktish
kaynak
1
Bu yüzden normal ifadeyi seviyorum. Teşekkürler, adamım, gerçekten günümü kurtardın
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup anahtar bırakıldığında tetiklenir.

isNaN(parseFloat(value))? giriş değerinin bir sayı olup olmadığını kontrol eder.

Bir sayı değilse, değer 1000 olarak ayarlanır. :Bir sayı ise, değer bu değere ayarlanır.

not: Nedense sadece ile çalışırtype="number"

Daha da heyecanlandırmak için bir sınırınız da olabilir:

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

Zevk almak!

— user40521
kaynak
4

Biraz bununla savaştım. Burada ve başka yerlerde birçok çözüm karmaşık görünüyordu. Bu çözüm HTML'nin yanında jQuery / javascript kullanır .

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

Benim durumumda, minimum değeri 1 olan küçük miktarları izliyordum, bu nedenle giriş etiketindeki min = "1" ve isNaN () kontrolünde abc = 1. Yalnızca pozitif sayılar için bu değerleri 0 olarak değiştirebilir ve hatta negatif sayılara izin vermek için giriş etiketinden min = "1" değerini kaldırabilirsiniz.

Ayrıca bu, birden fazla kutu için de çalışır (ve bunları kimlikle tek tek yapmaktan biraz zaman kazandırabilir), yalnızca "validateNumber" sınıfını gereken yere ekleyin.

açıklama

parseInt () temel olarak ihtiyacınız olanı yapar, tek farkı bir tamsayı değeri yerine NaN döndürür. Basit bir if () ile NaN döndürülür tüm durumlarda tercih "fallback" değerini ayarlayabilirsiniz :-). Ayrıca W3 burada NaN'in global versiyonunun kontrol etmeden önce cast yazacağını belirtiyor ve bu da bazı ekstra provalar veriyor (Number.isNaN () bunu yapmıyor). Bir sunucuya / arka uca gönderilen tüm değerler hala doğrulanmalıdır!

— İşaya
kaynak
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);" />
Snippet'i genişlet

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

— Sameh Saeed
kaynak
1
Metin içeren bir değeri yapıştırdığınızda, buna izin verir
— Chris Sim
1
Özel karakterlere de izin verir. Örneğin: á, ã, ê, ó, è, vb.
— AlmostPitt
3

HTML5 kullanabiliyorsanız yapabilirsiniz. <input type="number" /> Eğer değilse, bunu codebehind'den yapmak için sunmadığını söylediğiniz gibi javascript yoluyla yapmanız gerekir.

<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 kodu test etmedi ama yazım hatalarını kontrol etmezseniz daha fazla veya daha az doğru olmalıdır: D Dize boş veya boş vb.

— czioutas
kaynak
2

tamsayı ayarlanmadıysa 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
kaynak
2

Kabul edilen cevap:

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

İyi ama mükemmel değil. Benim için işe yarıyor, ancak if-ifadesinin basitleştirilebileceğine dair bir uyarı alıyorum.

Sonra böyle görünüyor, ki bu çok daha güzel:

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

Orijinal gönderiye yorum yapar, ancak itibarım bunu yapmak için çok düşük (sadece bu hesabı oluşturdu).

— Chris H.
kaynak
2

<input>Etiketi, type = 'number' özelliğiyle kullanabilirsiniz .

Örneğin, <input type='number' />

Bu giriş alanı yalnızca sayısal değerlere izin verir. Bu alan tarafından kabul edilmesi gereken minimum değeri ve maksimum değeri de belirleyebilirsiniz.

— Geeth Chadalawada
kaynak
2

Lütfen web sayfanızdaki metin giriş öğesinin çapraz tarayıcı filtre değeri projemi JavaScript dilini kullanarak girin : Giriş Anahtarı Filtresi . Değeri bir tam sayı, kayan sayı olarak filtreleyebilir veya telefon numarası filtresi gibi özel bir filtre yazabilirsiniz. Bir tamsayı girdi kod örneğine bakı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>
Snippet'i genişlet

Ayrıca , giriş anahtarı filtresi örneğinin "Tamsayı alanı:" sayfama da bakın

— Andrej
kaynak
2

Genel amaçlı olarak, JS doğrulaması aşağıdaki gibi olabilir:

Sayısal tuş takımı ve normal sayı tuşlarında çalışır 

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
kaynak
2

Giriş etiketinizin içine ekleyin: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
kaynak
2
SO hoş geldiniz! Ne yazık ki, bu zaten kabul edilmiş bir cevabı olan 5 1/2 yıllık bir sorudur. Sorulara burada cevap vermeden göz atmak isteyebilirsiniz: stackoverflow.com/unanswered
— AndroidNoobie
2

Aşağıdakileri eklemek için gönderilen bazı yanıtları güncelledim:

  • Yöntemi uzantı yöntemi olarak ekleyin
  • Yalnızca bir noktanın girilmesine izin ver

  • Ondalık noktadan sonra kaç sayıya izin verildiğini belirtin.

    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;
};
— Pleksis Pleksis
kaynak
1

Bunu hızlı ve kolay bir şekilde Posta Kodları için kullanıyorum.

<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
kaynak
1

Bu kodu kullanırken Mozilla Firefox'ta "BackSpace Düğmesi" ni kullanamazsınız, yalnızca Chrome 47 && event.charCode <58; backspace tuşunu kullanabilirsiniz; "pattern =" [0-9] {5} "gereklidir>

— Wendell Alvarez
kaynak
0

Birden fazla haneyi kabul etmek için REGEX koşuluna "+" eklemek daha iyidir (yalnızca bir basamak değil):

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

— Dashko Leonid
kaynak
0

Bir yol, izin verilen karakter kodları dizisine sahip olmak ve daha sonra, Array.includesgirilen karaktere izin verilip verilmediğini görmek için işlevi kullanmak olabilir.

Misal:

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

Yeterince basit?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Snippet'i genişlet

— Norma Jean
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.