Frage Wie erlaubt man nur numerische (0-9) in HTML-Eingabefeldern mit jQuery?


Ich erstelle eine Webseite mit einem Eingabefeld, in dem ich nur numerische Zeichen wie (0,1,2,3,4,5 ... 9) 0-9 zulassen möchte.

Wie kann ich dies mit jQuery tun?


807


Ursprung


Antworten:


Schau dir das an Plug-in (Fork von texotelas numerischem jquery plugin). Dies (jStepper) ist ein anderer.

Dies ist ein Link, wenn Sie es selbst bauen wollen.

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

Hinweis: Wenn Ihre Webseite HTML5 verwendet, können Sie das integrierte verwenden <input type="number"> und benutze die min und max Eigenschaften, um den minimalen und maximalen Wert zu steuern.


Folgendes wird minimiert und ermöglicht auch die Verwendung von STRG+X, STRG+C, und STRG+V

$(function() {
  $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="staticParent">
	<input id="child" type="textarea" />
</div>


1124



Hier ist die Funktion, die ich verwende:

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

Sie können es dann an Ihre Kontrolle anschließen, indem Sie Folgendes tun:

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

159



In der Reihe:

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

Unaufdringlicher Stil (mit jQuery):

$('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">


126



Sie könnten einfach einen einfachen regulären JavaScript-Ausdruck verwenden, um nach rein numerischen Zeichen zu suchen:

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

Dies gibt true zurück, wenn die Eingabe numerisch ist oder false, wenn nicht.

oder für Ereignisschlüsselcode, einfache Verwendung unten:

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

99



Sie können ein Eingabeereignis wie folgt verwenden:

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

Aber was ist das Code-Privileg?

  • Es funktioniert auf mobilen Browsern (Keydown und KeyCode haben Probleme).
  • Es funktioniert auch auf AJAX-generierten Inhalten, weil wir "on" verwenden.
  • Bessere Leistung als Keydown, zum Beispiel beim Paste Event.

64



Verwenden Sie JavaScript-Funktion IsNaN,

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

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

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

Aktualisieren: Und hier ein schöner Artikel, der darüber spricht, aber mit jQuery: Eingabe in HTML-Textfeldern auf numerische Werte beschränken


43



Kurz und gut - auch wenn dies nach mehr als 30 Antworten nie viel Aufmerksamkeit finden wird;)

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

40