Bir HTML metin girişini ( <input type=text />) yalnızca sayısal tuş vuruşlarına (artı '.') İzin verecek şekilde ayarlamanın hızlı bir yolu var mı ?

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

JavaScript

JSFiddle'da kendiniz deneyin .

Bir metnin giriş değerlerini <input>aşağıdaki setInputFilterişlevle filtreleyebilirsiniz (Kopyala + Yapıştır, Sürükle + Bırak, klavye kısayolları, bağlam menüsü işlemleri, yazılamaz tuşlar, düzeltme konumu, farklı klavye düzenleri ve IE 9'dan bu yana tüm tarayıcıları destekler ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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 = "";
      }
    });
  });
}

Artık setInputFilterbir giriş filtresi kurmak için bu işlevi kullanabilirsiniz :

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' 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 !

daktilo ile yazılmış yazı

İşte bunun bir TypeScript sürümü.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Bunun jQuery sürümü de var. Bu cevaba bakın .

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 .

Bu DOM'u kullan

<input type='text' onkeypress='validate(event)' />

Ve bu senaryo

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Buna iyi bir cevap bulmak için uzun ve zor aradım ve umutsuzca ihtiyacımız var <input type="number", ancak kısaca, bu 2, ortaya çıkabilecek en kısa yollardır:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Eğer silinmeden önce bir saniyeliğine gösterilen kabul edilmeyen karakterden hoşlanmıyorsanız, aşağıdaki yöntem benim çözümümdür. Çok sayıda ek koşula dikkat edin, bu her türlü gezinme ve kısayol tuşunu devre dışı bırakmaktan kaçınmak içindir. Bunu nasıl kompaktifleştireceğini bilen biri varsa, bize bildirin!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

İşte tam olarak bir ondalık sayıya izin veren basit, ancak daha fazla değil:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Ve benim için harika çalışan bir örnek daha:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Ayrıca tuşa basma etkinliğine ekle

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Ve HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

İşte bir jsFiddle örneği

HTML5 <input type=number>size uygun geliyor. Şu anda yalnızca Opera yerel olarak desteklemektedir, ancak JavaScript uygulaması olan bir proje vardır.

Buradaki yanıtların çoğu, önemli olayları kullanmanın zayıflığına sahiptir .

Cevapların çoğu klavye makroları, kopyalama + yapıştırma ve daha fazla istenmeyen davranış ile metin seçimi yapma yeteneğinizi sınırlar, diğerleri makineli tüfeklerle sinekleri öldüren belirli jQuery eklentilerine bağlı gibi görünüyor.

Bu basit çözüm, giriş mekanizmasından (tuş vuruşu, kopyala + yapıştır, sağ tıkla kopyala + yapıştır, konuşmadan metne vb.) Bağımsız olarak benim için çapraz platform için en iyi şekilde çalışıyor gibi görünüyor. Tüm metin seçimi klavye makroları yine de çalışır ve komut dosyasıyla sayısal olmayan bir değer ayarlama yeteneğini bile sınırlar.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Burada belirtilen iki cevabın bir kombinasyonunu kullanmayı seçtim yani

<input type="number" />

ve

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

<input type="text" onkeypress="return isNumberKey(event);">

HTML5 normal ifadeleri destekler, böylece bunu kullanabilirsiniz:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Uyarı: Bazı tarayıcılar henüz bunu desteklemiyor.

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

ek olarak virgül, nokta ve eksi (, .-) ekleyebilirsiniz

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Çok basit....

// Bir JavaScript işlevinde (HTML veya PHP kullanabilir).

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

Form girişinizde:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Giriş maks. (Yukarıda belirtilenler 12 basamaklı bir sayıya izin verir)

2 çözüm:

Form doğrulayıcı kullanın (örneğin jQuery doğrulama eklentisi ile) )

Giriş alanının onblur (yani kullanıcı alandan ayrıldığında) olayı sırasında, normal ifadeyle bir kontrol yapın:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Daha güvenli bir yaklaşım, tuş basışlarını ele geçirmek ve keyCodes'ı filtrelemeye çalışmak yerine girişin değerini kontrol etmektir.

Bu şekilde kullanıcı klavye oklarını, değiştirici tuşlarını, geri almayı, silme, standart olmayan keyboarları kullanma, yapıştırmak için fareyi kullanma, metni sürükleyip bırakma, hatta erişilebilirlik girişlerini kullanmada serbesttir.

Aşağıdaki komut dosyası pozitif ve negatif sayılara izin verir

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

DÜZENLEME: Eski cevabımı kaldırdım çünkü sanırım şimdi eskidir.

Bunun için desen kullanabilirsiniz:

<input id="numbers" pattern="[0-9.]+" type="number">

Burada tam mobil web arayüzü arayüzü ipuçlarını görebilirsiniz .

Lütfen aşağıda belirtilen çözümü bulun. Bu kullanıcının sadece girebilecek olabilir yılında numericdeğeri, aynı zamanda kullanıcı muktedir olamaz copy, paste, dragve dropgirişteki.

İzin Verilen Karakterler

0,1,2,3,4,5,6,7,8,9

Etkinliklerde Karakterlere ve Karakterlere izin verilmiyor

• Alfabetik değer
• Özel karakterler
• kopya
• Yapıştırmak
• Sürüklemek
• Düşürmek

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Çalışmıyorsa bana bildirin.

Alete (belki bir cep telefonuna) alfa veya sayısal arasında önermek isterseniz kullanabilirsiniz <input type="number">.

Bir örnek daha nerede olabilir , giriş alanına sadece sayı eklemek olamaz harfler

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Event.keyCode veya event.whike yerine jQuery ve replace () kullanarak kısa ve tatlı bir uygulama:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Yazılan harfin anlık olarak görünmesi ve CTRL / CMD + A'nın biraz garip davranması gibi sadece küçük bir yan etki.

input type="number" bir HTML5 özelliğidir.

Diğer durumda bu size yardımcı olacaktır:

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

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

JavaScript kodu:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML Kodu:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

backspace anahtar kodu 8 olduğundan ve normal ifade ifadesi izin vermediğinden mükemmel çalışır, bu nedenle hatayı atlamanın kolay bir yoludur :)

Bu sorunu çözmenin kolay bir yolu, metin kutusuna yazılan karakterlerin normal ifadesiyle doğrulamak için bir jQuery işlevi uygulamaktır:

Html kodunuz:

<input class="integerInput" type="text">

Ve jQ işlevi jQuery kullanarak

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

JQuery kullanarak sadece bir başka varyant

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

sadece type = "number" kullanın, bu özellik tarayıcıların çoğunda destekleniyor

<input type="number" maxlength="3" ng-bind="first">

Ayrıca, giriş değerini (varsayılan olarak dize olarak kabul edilir) kendisiyle sayısal olarak zorlayarak karşılaştırabilirsiniz, örneğin:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Ancak, bunu keyup vb. Gibi olaylara bağlamanız gerekir.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Bazı harika cevaplar gördüm, ancak onları olabildiğince küçük ve olabildiğince basit buluyorum, belki biri bundan faydalanacak. Javascript Number()ve isNaNböyle bir işlevsellik kullanırsınız :

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Bu yardımcı olur umarım.

Bu DOM'u kullanın:

<input type = "text" onkeydown = "validate(event)"/>

Ve bu senaryo:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... VEYA bu script, indexOf olmadan, iki kullanarak for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Onkeypress özniteliğinden önce onkeydown özniteliği kontrol edildiğinden onkeypress yerine onkeydown özniteliğini kullandım. Sorun Google Chrome tarayıcısında olabilir.

"Onkeypress" özelliğiyle TAB, google chrome'daki "preventDefault" ile kontrol edilemez, ancak "onkeydown" özelliğiyle TAB kontrol edilebilir hale gelir!

SEKME için ASCII Kodu => 9

İlk komut dosyasının ikincisinden daha az kodu vardır, ancak ASCII karakter dizisi tüm anahtarlara sahip olmalıdır.

İkinci komut dosyası birinciden çok daha büyüktür, ancak dizinin tüm anahtarlara ihtiyacı yoktur. Dizinin her bir konumundaki ilk basamak, her bir konumun kaç kez okunacağıdır. Her okuma için, bir sonraki okumaya 1 artırılacaktır. Örneğin:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




Sayısal tuşlar yalnızca 10 (0 - 9) olduğunda, ancak 1 milyon olsaydı, tüm bu tuşlarla bir dizi oluşturmak mantıklı olmazdı.

ASCII kodları:

• 8 ==> (Geri silme);
• 46 => (Sil);
• 37 => (sol ok);
• 39 => (sağ ok);
• 48-57 => (sayılar);
• 36 => (ev);
• 35 => (son);

Bu geliştirilmiş bir işlevdir:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

En iyi yol (TÜM sayı türlerine izin verin - gerçek negatif, gerçek pozitif, iinteger negatif, tamsayı pozitif):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Bu, geowa4'ün çözümünün genişletilmiş sürümüdür . Destekler minve maxöznitelikler. Sayı aralık dışındaysa, önceki değer gösterilir.

Burada test edebilirsiniz.

Kullanımı: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Girişler dinamikse bunu kullanın:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});