JQuery kullanarak HTML giriş kutusunda yalnızca sayısal (0-9) izin nasıl verilir?


901

Yalnızca (0,1,2,3,4,5 ... 9) 0-9 gibi sayısal karakterlere izin vermek istediğim bir giriş metin alanına sahip olduğum bir web sayfası oluşturuyorum.

Bunu jQuery kullanarak nasıl yapabilirim?


73
İstemci tarafı doğrulamasına güvenemeyeceğinizi unutmayın; kullanıcının JavaScript'in kapalı olması veya JavaScript uyumlu bir tarayıcı kullanmaması durumunda da sunucuyu doğrulamanız gerekir.
cjk

45
html5'i düşündün mü? <girdi türü = "sayı" />. min ve max özellikleriyle girişi de kısıtlayabilirsiniz
ZX12R

5
Bence keyup olayında giriş değerlerini kontrol etmeli ve anahtar kodları kontrol etmemelisiniz, çünkü klavyedeki farklılıklar arasında çok daha güvenilir ve neyin olmadığı.
Richard

13
Tamamen Richard ile anlaşmak: do not keycodes kullanın. Kabul edilen cevap, Fransızca klavyelerde çalışmaz, çünkü bu klavyelerde sayı yazmak için "Shift" tuşuna basmanız gerekir. Anahtar kodlar çok riskli, IMHO.
MiniQuark

3
@ ZX12R Geçerli IE sürümlerinde çalışmaz. Taze tutmak için en son kodu kendi şeylerinizde kullanmak iyi ve iyidir, ancak bu hemen hemen her profesyonel proje için bir seçenek değildir. caniuse.com/#feat=input-number
Eric

Yanıtlar:


1260

Not: Bu güncellenmiş bir cevaptır. Aşağıdaki yorumlar, kod kodlarıyla uğraşan eski bir sürüme ilişkindir.

jQuery

JSFiddle'da kendiniz deneyin .

Bunun için hiçbir yerel jQuery uygulaması yoktur, ancak bir metnin giriş değerlerini <input>aşağıdaki inputFiltereklenti ile filtreleyebilirsiniz (Kopyala + Yapıştır, Sürükle + Bırak, klavye kısayolları, bağlam menüsü işlemleri, yazılmaz tuşlar, düzeltme konumu, farklı klavye düzenleri ve IE 9'dan bu yana tüm tarayıcılar ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Artık inputFilterbir giriş filtresi yüklemek için eklentiyi kullanabilirsiniz :

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Daha fazla giriş filtresi örneği için JSFiddle demosuna bakın . Ayrıca yine de sunucu tarafı doğrulaması yapmanız gerektiğini unutmayın !

Saf JavaScript (jQuery olmadan)

jQuery aslında bunun için gerekli değildir, aynı şeyi saf JavaScript ile de yapabilirsiniz. Bu cevaba bakınız .

HTML 5

HTML 5'in yerel bir çözümü vardır <input type="number">( teknik özelliklere bakın ), ancak tarayıcı desteğinin değişiklik gösterdiğine dikkat edin:

  • Çoğu tarayıcı girdiyi yalnızca formu gönderirken doğrular, yazarken doğrulamaz.
  • Çoğu mobil tarayıcı desteklemez step, minve maxniteliklerini.
  • Krom (sürüm 71.0.3578.98) hala kullanıcı karakterleri girmek için izin verir eve Ealana. Ayrıca bu soruya bakın .
  • Firefox (sürüm 64.0) ve Edge (EdgeHTML sürüm 17.17134), kullanıcının yine de alana herhangi bir metin girmesine izin verir .

W3schools.com adresinde kendiniz deneyin .


45
Teşekkürler! event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 ondalık basamak istiyorsanız
Michael L Watson

9
Txt kutusunda sol ve sağ ok navigasyonuna izin vermek için keyCodes 37 ve 39'u ekleyin, örneğin: if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
Anthony Queen

22
ooo, test edicilerimizden bunun için bir sorun aldım. Kullanıcının vardiyayı basılı tutmasını ve sayısal tuşlara basmasını engellemeniz gerekir, aksi takdirde girişe izin verir! @ # $% ^ & * ()
Allen Rice

6
Üst karakter + hata onaylandı. Ayrıca, ALT + sayısal tuş takımı hemen hemen her şeye izin verir (yani Alt + 321 = A, Alt + 322 = B, vb ...). Sunucu tarafı doğrulaması için başka bir durum.
Anthony Queen

140
Bu yanıta gerçekten katılmıyorum: tuş kodlarıyla oynamak çok riskli çünkü klavye düzeninin ne olduğundan emin olamazsınız. Örneğin, Fransız klavyelerinde, kullanıcıların sayı yazmak için shift tuşuna basması gerekir. Yani bu kod hiç çalışmaz. Bu yüzden lütfen bu anahtar kodu kesmek yerine doğrulama için gidin.
MiniQuark

182

İşte kullandığım işlev:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Daha sonra şunları yaparak kontrolünüze ekleyebilirsiniz:

$("#yourTextBoxName").ForceNumericOnly();

2
Bu yararlı buldum, ama bir anoying "hata" bulundu. Bunu iMac'imde kullandığımda, a ve e gibi bazı harflere izin verir. PC'deki tuş takımı sayılarının iMac üzerindeki harfler olduğu ve Mac klavyesinin normal sayılarla aynı olduğu anlaşılıyor. kimse nasıl mac ve pc üzerinde çalışmasını bilmek?
Volmar

3
"Home", "End" tuşları da çalışmıyor. Bu Peter'ın önerdiği daha iyi bir çözümdür: west-wind.com/weblog/posts/2011/Apr/22/…
bman

Neden bir return this.each(function() ?
powtac

2
@powtac - böylece birden çok nesnede .ForceNumericOnly () öğesini çağırabilirsiniz. Örneğin ... $ ("input [type = 'text']"). ForceNumericOnly ()
Oliver

1
@powtac eachgelen return this.each(function()HaggleLad bahsedilen olarak birden fazla nesne sağlamaktır ve returnparça gibi zincir izin vermek için, arayan jQuery nesnesi geri dönmek için$("input[type='text'").ForceNumericOnly().show()
Jose Rui Santos

149

Çizgide:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Göze batmayan stil (jQuery ile):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">


2
Bu, kullanıcı sol ok tuşuna bassa bile kulaklığı sonuna kadar hareket ettirir.
Phrogz

1
@phrogz, şunu deneyin: onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')".
Patrick Fisher

Bu mükemmel bir şekilde çalışır ve yukarıdakilerin aksine Shift + sayısını önler.
Nick Hartley

5
@ mhenry1384 Beklenen davranış budur. Güzel bir geri bildirim olarak görüyorum, ancak hoşunuza gitmezse, bir anahtar kod yaklaşımı aradığınız şey olacaktır.
Patrick Fisher

2
/[^0-9]|^0+(?!$)/gBaştaki sıfır serilerini önlemek için olarak değiştirebilirsiniz .
Johny Skovdal

105

Yalnızca sayısal karakterleri test etmek için basit bir JavaScript normal ifadesi kullanabilirsiniz:

/^[0-9]+$/.test(input);

Girdi sayısal ise true, değilse false döndürür.

veya olay kodu için, aşağıda basit kullanım:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

11
Bu yaklaşımın uygulanması için cevabımı görün.
Patrick Fisher

normal bir ifadeyi kontrol etmek yerine sayısal bir tuşa basışını kontrol etmek daha az işlemci süresi gerektirmez mi?
andrsnn

87

Aşağıdaki gibi giriş olayında kullanabilirsiniz:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Ancak, bu kod ayrıcalığı nedir?

  • Mobil tarayıcılarda çalışır (keydown ve keyCode sorunları var).
  • AJAX tarafından oluşturulan içerik üzerinde de çalışır, çünkü "on" kullanıyoruz.
  • Tuşlamadan daha iyi performans, örneğin macun olayında.

6
Bunun kabul edilen cevaptan çok daha sağlam (ve daha basit) bir çözüm olduğunu hissediyorum.
Jeremy Harris

Değiştir (/ \ D / g, '') kullanıldığında daha da basit
Alfergon

Merhaba, nasıl bir ile sayısal değeri sağlayabilirsiniz decimalarasında 0.0hiç 24.0bunu girmesine izin alamıyorum.
trafosu

Ben öneririmthis.value = Number(this.value.replace(/\D/g, ''));
HasanG

İyi cevap, bir girdinin sayısal olup olmadığını kolayca değiştirerek sınıf değiştirmeyi sağlar
Raklos

55

Kısa ve tatlı - 30'dan fazla cevaptan sonra bu kadar dikkat çekmeyecek olsa bile;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

5
Tuş takımını girdi ile değiştirirdim, aksi takdirde basılı olan bir harfi koruyabilir ve odağı metin kutusundan çıkarmak için tıklayabilir ve metni olduğu gibi bırakabilirsiniz. girişi bunun gerçekleşmeyeceğinden emin olun
WizLiz

Normal ifade için teşekkürler - ama bu biraz daha iyi bir olay işleyicisi: $ ('# number_only'). On ('input propertychange', function () {this.value = this.value.replace (/ [^ 0-9] / g, '');});
BradM

3
FYI - Soru bunu sormadı, ancak bu ondalık sayılara izin vermiyor (örn. 12.75). "Keyup" yerine "input" ifadesinin bağlanması, karakterlerini bir anlığına görmek yerine kaldırılması için daha yumuşak bir UX sağlar.
Paul

44

Kullanım Javascript Isnan ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ('inputid'). val ()))

if (isNaN(document.getElementById('inputid').value))

Güncelleme: Ve burada güzel bir makale hakkında konuşuyor ama jQuery kullanarak: HTML Metin Kutularındaki Girdiyi Sayısal Değerlerle Kısıtlama


40
Peki ... Örneğinizin JQuery kullanan kısmı hariç "JQuery kullanmıyorum"
GalacticCowboy

document.getElementById('inputid').val()ahbap .. bu hala jquery. .val()jquery bir şeydir. kullanım.value
Mart'ta


Merhaba, nasıl bir ile sayısal değeri sağlayabilirsiniz decimalarasında 0.0hiç 24.0bunu girmesine izin alamıyorum.
trafosu

28
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Kaynak: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values


6
Vay canına, boş "if" blokları ve her ikisi de sihirli sayılar! Biraz ağzımı attım. : D Ama ciddiyim, neden sadece regex /^XXXX. ile girişle eşleşebildiğinizde tüm bu sorunla karşılaşıyorsunuz. Peki '8' neyi temsil ediyor?
Alan Moore

@Alan: Haha, hiçbir fikrim yok - doğrudan kaynaktan kopyaladım. Bunun yerine "if (event.keyCode! = 46 && event.keyCode! = 8)" yazar veya söylediğin gibi normal ifadeyi kullanırdım. Sanırım 8 silme anahtarını temsil ediyor.
Ivar

4
Örneğin Shift + 8 tuşlarına basmayı deneyin - onaylamanız * içeri girmenizi sağlayacaktır
Anton

Shift tuşunu + Sayıları (Özel karakter gibi! @ # $% ^ ..)
işliyorsa

27

Bunu dahili ortak js dosyamızda kullanıyorum. Ben sadece bu davranış gerektiren herhangi bir girdi sınıf ekleyin.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

1
Güzel, zarif ve kullanışlı kod! Teşekkürler. Ancak keyup ve keydown olaylarını eklemelisiniz.
Silvio Delgado

25

Benim için daha basit olan

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

7
Sadece this.value.replace(/[^0-9\.]/g,'');OP'nin 0-9
Chalise

24

Neden bu kadar karmaşık? HTML5 kalıp özelliği olduğu için jQuery'ye bile ihtiyacınız yoktur:

<input type="text" pattern="[0-9]*">

Harika olan şey, mobil cihazlarda sayısal bir klavye açmasıdır, bu da jQuery kullanmaktan çok daha iyidir.


2
Bunun çok daha fazla oyu olmalı. Bir şey varsa, html5 olmayan tarayıcılar için bir geri ödeme regex'i de ekleyebilirsiniz - ancak verilerin doğrulanması yine de sunucu tarafında ele alınmalıdır.
Markus

şu anda çoğu tarayıcı tarafından iyi bir şekilde desteklendiği anlaşılıyor, bu nedenle modernizr desteği o kadar önemli değil: caniuse.com/#search=pattern Safari, bu sitede kısmen desteklenmiş olarak listelenmiş olsa bile çok iyi çalışıyor. Dene!
misafir

@guest Bunun için çok teşekkür ederim. En hızlı ve en kolay cevap! Bence en iyi cevap.
BinaryJoe01

19

Bu çok basit çözümü kullanarak da aynısını yapabilirsiniz

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Çözüm için bu bağlantıya başvurdum. Mükemmel çalışıyor !!!


Belki de buna izin vermek daha iyidir. ondalık sayılar
Zango

Bu kromda mükemmel çalışır. Ancak Mozilla
FireFox'ta

Merhaba, nasıl bir ile sayısal değeri sağlayabilirsiniz decimalarasında 0.0hiç 24.0bunu girmesine izin alamıyorum.
trafosu

kopyala yapıştır ile çalışmaz
mrid


14

HTML5'teki desen özelliği, öğenin değerinin kontrol edildiği normal bir ifadeyi belirtir.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Not: Pattern özelliği şu giriş türleriyle çalışır: metin, arama, url, tel, e-posta ve şifre.

  • [0-9] herhangi bir normal ifade koşulu ile değiştirilebilir.

  • {1,3} en az 1'i temsil eder ve en fazla 3 basamak girilebilir.


Merhaba, nasıl bir ile sayısal değeri sağlayabilirsiniz decimalarasında 0.0hiç 24.0bunu girmesine izin alamıyorum.
trafosu

1
@transformer şunu deneyin <input type = "number" pattern = "[0-9] + ([\.,] [0-9] +)?" adım = "0.01">
vickisys

11

JQuery.validate kullanarak oldukça basit bir şey

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

8

function suppressNonNumericInput (event) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

Merhaba, nasıl bir ile sayısal değeri sağlayabilirsiniz decimalarasında 0.0hiç 24.0bunu girmesine izin alamıyorum.
trafosu

8

Kullanıcının diğer çözümlerin yaptığı gibi metin seçmesini veya yapıştırma yapmasını engellemeyen çok iyi ve basit bir çözüme geldim. jQuery tarzı :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

Hey bunu kullanıyorum ama gerçekten baktığım şey 1.2 ya da
3.455

8

Bu JavaScript işlevini kullanabilirsiniz:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

Ve bunu metin kutunuza şu şekilde bağlayabilirsiniz:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Yukarıdakileri üretimde kullanıyorum ve mükemmel çalışıyor ve çapraz tarayıcı. Ayrıca, jQuery'ye bağlı değildir, bu nedenle satır içi JavaScript ile metin kutunuza bağlayabilirsiniz:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

Birisi girişe sayısal olmayan metin yapıştırdığında bu başarısız olur. Bunun üstesinden nasıl gelebiliriz? Bunu aklımdan geçiremiyorum.
Kiran Ruth R

7

Bence herkese yardımcı olacak

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

tuş takımı girişini unutuyorsunuz. Bu şunları içerir:if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
tomvo

6

Ben mayın yazdım @ user261922 yukarıdaki yazı, biraz değiştirilmiş böylece tüm, sekmesini ve aynı sayfada birden çok "sadece sayı" alanları işleyebilir.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

6

İşte bir süre önce oluşturduğum hızlı bir çözüm. makalemde bunun hakkında daha fazla bilgi bulabilirsiniz:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

6

Sekmeye izin vermek istersiniz:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

6

İşte jQuery UI Widget fabrikasını kullanan bir cevap. Hangi karakterlere izin verileceğini kolayca özelleştirebilirsiniz.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Bu sayılara, sayı işaretlerine ve dolar miktarlarına izin verir.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

Bu, $ ve sonra + - birinci veya birinci / ikinci karakter olarak ve daha sonra yalnızca 1 ondalık ayırıcı sağlar mı?
gordon

6

Bu kırılmaz gözüküyor.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

5

Sayısal tuş takımının ve sekme tuşunun da çalıştığından emin olmanız gerekir

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

5

Biraz yardım etmek istedim ve versiyonumu yaptım onlyNumbers...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

"... input ... id =" price "onkeydown =" only return Numbers (event) "..." girdi etiketini eklemeniz yeterlidir;


5

Ben de cevap vermek istiyorum :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Hepsi bu ... sadece rakamlar. :) Neredeyse sadece 'bulanıklık' ile çalışabilir, ama ...


5

Enter değerinin sayısal olup olmadığını kontrol etmenin basit yolu:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

5

Bu yöntemi Jquery'de uygulamanız yeterlidir ve metin kutunuzu yalnızca sayıyı kabul etmek için doğrulayabilirsiniz.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Bu çözümü burada deneyin


5

HTML5 sayı girişini deneyebilirsiniz:

<input type="number" placeholder="enter the number" min="0" max="9">

Bu girdi etiketi öğesi, min özelliği 0 ve max özelliği 9 olarak ayarlandığından, yalnızca 0 - 9 arasında bir değer alacaktır.

daha fazla bilgi için http://www.w3schools.com/html/html_form_input_types.asp adresini ziyaret edin.

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.