Show-Input-tag(textbox-Steuerelement) mit zwei stelligen format in HTML5

Wie kann ich ein input-tag, das nimmt immer zwei Ziffern? wie 01, 02, 03 usw bis zum 24. Eine führende null vorhanden sein sollten, im Fall von einzelnen Ziffern(0 bis 9)

<input id="hourInput" type="number" min="1" max="24" step="1"  />
InformationsquelleAutor Nimmy | 2015-10-06
  1. 18

    Leider ist es nicht möglich, in reinem HTML5, um dies zu erreichen. Javascript wird benötigt...

    <input id="hourInput" type="number" min="1" max="24" step="1" onchange="if(parseInt(this.value,10)<10)this.value='0'+this.value;" />

    BEARBEITEN:
    Da diese Antwort scheint, gut zu erhalten, trafic, ich möchte noch hinzufügen, dass die Tatsache, dass der Ansatz, den ich vorgeschlagen haben, ist ein naiver Weise, es zu tun, und wird nur dann korrekt arbeiten, mit ein min-Attribut höher als -9. Wenn die Anzahl geht tiefer, die 0 wird noch Hinzugefügt werden, was in 0-234, wenn der Benutzer geben Sie einen negativen Wert von 234.

    • Funktioniert auch: <input id="hourInput" type="number" min="1" max="24" step="1" onchange="if( this.Wert.Länge == 1 ) diesem.value='0'+diese.Wert;" />
    • Erstellt habe ich eine eckige js-Richtlinie mit diesem Konzept, github.com/ksnimmy/txDataType
    • Ich denke, wenn Sie den Eingabe-event, das Verhalten besser wird.
    • Das ist eine gute Idee, diese Dinge etwas besser, aber ich fühle, es ist aus dem Umfang der OP hart.
    • Funktioniert nicht auf Firefox, funktioniert in Google Chrome (ich habe gerade getestet, diese zwei). In Firefox scheint es, dass Sie programmgesteuert ändern können, die Anzahl, aber es wird nicht lassen Sie re-formatieren einer Zahl kleiner als 10, um zwei Ziffern.
    • Dies ist sehr gut bekannt bugzilla.mozilla.org/show_bug.cgi?id=1005603 eine option wäre, sich für ein input vom Typ "text" statt. Aber das würde die vollständige Tastatur statt mit der numerischen ein. Sie könnten hack eine versteckte Zahl-Eingang auf der Oberseite der text, den man, wäre das erhalten inputs und aktualisieren Sie die visual one...

    InformationsquelleAutor Salketer
  2. 7

    Gibt es keine native Möglichkeit, das zu tun. Aber Sie können oninput-event zu formatieren.

        <input id="hourInput" type="number" oninput='format(this)' min="1" max="24" step="1"  />

    Javascript

    function format(input){
  if(input.value.length === 1){
    input.value = "0" + input.value;
  }
}

    http://jsbin.com/dedixapasi/edit?html,js,output

    • Toll!, Jedoch, mehr einfachen Weise: <input id="hourInput" type="number" min="1" max="24" step="1" onchange="if(this.Wert.Länge < 2) das.value = '0' + diese.Wert;">
    InformationsquelleAutor Özgür Kaplan
  3. 0

    Können Sie auch mithilfe von JQuery wie folgt aus:

    JS:

    $(document).ready(function() {
	$("#hourInput").keydown(function(event) {
		if ( event.keyCode == 46 || event.keyCode == 8 ) {
			
		}
		else {
			if (event.keyCode < 48 || event.keyCode > 57 ) {
				event.preventDefault();	
			}	
		}
	});
    $("#hourInput").keyup(function(event) {
        var str = $('#hourInput').val();
        if(str > 24)
        {
            $('#hourInput').val(str.substring(0,str.length - 1));
        }
        
    });
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="hourInput" type="number" min="1" step="1" />

    Hoffe, es hilft.

    InformationsquelleAutor ketan
Schreibe einen Kommentar