在HTML5中显示两位数格式的输入标签(文本框控件)

Show Input tag(textbox control) with two digit format in HTML5

本文关键字：控件 输入 标签 文本 格式 两位 HTML5 显示      更新时间：2023-09-26

如何创建一个总是接受两位数字的输入标签?像01、02、03等，最多24个。如果是个位数(0到9)，应该有一个前导零

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

不幸的是，在纯HTML5中，这是不可能实现的。需要Javascript…

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

编辑:由于这个答案似乎得到了良好的流量，我想添加这样一个事实，即我建议的方法是naïve方法来做到这一点，并且只会正确地使用大于-9的最小属性。如果数字变小，当用户输入负数234时，仍然会添加0，结果是0-234。

没有本地方法可以做到这一点。但是你可以使用oninput事件来格式化。

    <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、输出

你也可以像这样使用JQuery:

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

希望能有所帮助。

function format(input){
    if(input.value < 0) input.value=Math.abs(input.value);
    if(input.value.length > 2) input.value = input.value.slice(0, 2);
    $(input).blur(function() {
       // if(input.value.length == 1) input.value=0+input.value;
       // if(input.value.length == 0) input.value='01';
       //* if you want to allow insert only 2 digits *//
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="number" step="1" oninput="format(this)">

这对我有用…希望你也一样。

相关文章：