एचटीएमएल 5

Question

में दो अंकों के प्रारूप के साथ इनपुट टैग (टेक्स्टबॉक्स नियंत्रण) दिखाएं मैं इनपुट टैग कैसे बना सकता हूं, जो हमेशा दो अंकों को स्वीकार करता है? जैसे 01, 02, 03 आदि 24. अप करने के लिए एक अग्रणी शून्य एकल अंक (0 से 9 तक)

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

Answer 1

के मामले में उपस्थित होना चाहिए दुर्भाग्य से यह इस लक्ष्य को हासिल करने के लिए संभव नहीं है, शुद्ध एचटीएमएल 5 में,। जावास्क्रिप्ट की आवश्यकता होगी ...

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

संपादित करें: के बाद से इस सवाल का जवाब अच्छा यातायात पाने के लिए लगता है, मैं तथ्य यह है कि दृष्टिकोण मैं सुझाव दिया है यह करने के लिए एक सीधी सादी तरीका है और जोड़ना चाहते हैं केवल होगा -9 से अधिक मिनट की विशेषता के साथ सही ढंग से काम करें। यदि संख्या कम हो जाती है, तो 0 034 में परिणामस्वरूप जोड़ा जाएगा जब उपयोगकर्ता 234 का नकारात्मक मान दर्ज करेगा।

Answer 2

ऐसा करने का कोई मूल तरीका नहीं है। हालांकि आप फॉर्मेट करने के लिए ऑनपुट ईवेंट का उपयोग कर सकते हैं।

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

जावास्क्रिप्ट

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

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

Answer 3

तुम भी निम्नलिखित की तरह JQuery जरिए कर सकते हैं:

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

उम्मीद है कि यह मदद करता है।