Göster HTML5'te iki basamaklı giriş etiketini (metin kutusu denetimi) göster

Question

Her zaman iki basamak kabul eden bir giriş etiketi nasıl yapabilirim? gibi 01, 02, 03 vb 24'e kadar bir sıfır Ne yazık ki, bu elde etmek için, saf HTML5'teki mümkün değildir, tek haneli (0 9)

<input id="hourInput" type="number" min="1" max="24" step="1" /> 

Answer 1

halinde mevcut olması gerekmektedir. Bu cevap iyi Alt almak gibi görünüyor beri, ben tavsiye ettiler yaklaşım bunu yapmak için naif bir yoludur ve gerçeği eklemek istiyorum sadece yapacaktır: JavaScript

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

DÜZENLEME ... gerekecektir -9'dan daha yüksek bir min özniteliği ile doğru şekilde çalışın. Sayı azalırsa, kullanıcı 234 negatif değeri girdiğinde 0-234 ile sonuçlanan eklenir.

Answer 2

Bunu yapmak için yerel bir yol yoktur. Ancak biçimlendirmek için oninput olayını kullanabilirsiniz.

<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

Answer 3

Ayrıca aşağıdaki gibi JQuery kullanarak yapabilirsiniz:

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

<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" />

Umarım yardımcı olur.