Deaktivieren Sie die Texteingabe in <input type = "number">

Ich mache eine einfache Web-App. An einem Teil davon, ich habe ein Eingabefeld von type = „number“Deaktivieren Sie die Texteingabe in <input type = "number">

<input type="number" min="0">

Wie auch immer eingeschlossen, wenn ich den Code in meinem neuesten Google Chrome Browser laufen, ich bin in der Lage Text eingeben zu:

I entered text in an input type of number

Ich möchte nicht, dass Benutzer das können. Wie soll ich das korrigieren?

Quelle

2014-01-19 coder

javascript Eingang zu fangen und alles zu löschen, was das ist, keine Nummer. –

@MarcB Wie mache ich das? – coder

Versuchen Sie dies, http://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox –

Sie können mit JavaScript (zum Beispiel mit jQuery) nur bestimmte Zeichen ermöglichen:

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^0-9]/g, ''); 
    // Update value 
    $(this).val(sanitized); 
});

Here eine Geige ist.

Die gleiche Sache mit Unterstützung für Schwimmer:

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^0-9.]/g, ''); 
    // Remove the first point if there is more than one 
    sanitized = sanitized.replace(/\.(?=.*\.)/, ''); 
    // Update value 
    $(this).val(sanitized); 
});

Und here ist eine andere Geige.

Aktualisierung: Obwohl Sie dies möglicherweise nicht benötigen, hier ist eine Lösung, die ein führendes Minuszeichen erlaubt.

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^-0-9]/g, ''); 
    // Remove non-leading minus signs 
    sanitized = sanitized.replace(/(.)-+/g, '$1'); 
    // Update value 
    $(this).val(sanitized); 
});

3rd fiddle

Und nun eine endgültige Lösung, die nur gültig Dezimalstellen (einschließlich Schwimmer und negative Zahlen) erlaubt:

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^-.0-9]/g, ''); 
    // Remove non-leading minus signs 
    sanitized = sanitized.replace(/(.)-+/g, '$1'); 
    // Remove the first point if there is more than one 
    sanitized = sanitized.replace(/\.(?=.*\.)/g, ''); 
    // Update value 
    $(this).val(sanitized); 
});

Final fiddle

Quelle

2014-01-19 09:35:37

Wenn die Zahl Deciaml Punkt '.' dann ..? das wird nicht helfen ... –

@Mike Antwort aktualisiert –

dies funktioniert nicht für mich, weil sogar char bei der eingabe ist die $ (this) .val() gleich '' –

Sie können HTML5 input type number verwenden zu beschränken Nur Nummerneinträge:

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

Dies funktioniert nur in HTML5 Beschwerde Browser. Stellen Sie sicher, dass Ihre HTML-Dokuments Doctype ist:

<!DOCTYPE html>

Für allgemeine Zwecke, können Sie JS Validierung haben, wie unten:

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

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

Wenn Sie Dezimalzahlen die „wenn die Bedingung“ mit diesem ersetzen zulassen möchten:

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

Quelle: HTML Text Input allow only Numeric input

Quelle

2014-01-19 10:21:53

Ich mag Ihre Lösung, aber die Dezimal-Validierung ist falsch. '1.2.3.4' ist offensichtlich keine gültige Dezimalzahl. Übrigens, Ihr Code-Snippet verhindert auch, dass Tastaturkürzel wie "STRG + A" und "STRG + C" funktionieren. –

@still_learning 'STRG + A' und' STRG + C' funktionieren einwandfrei .. und '1.2.3.4' ist keine gültige Dezimalzahl .. richtig .. aber ich glaube, wir haben diesen Code nicht in gültige Dezimalzahlen geschrieben. .. die Anforderung ist anders .... –

Deaktivieren Sie die Texteingabe in <input type = "number">

Antwort

Verwandte Themen