Question

如何创建一个始终接受两位数字的输入标签？如01,02,03等，最多24个。如果是单个数字（0到9），则应该存在前导零

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

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

编辑：由于这个答案似乎得到了很好的交流，我想补充一点，我所建议的方法是一种天真的方式，并且只能正确地使用高于-9的min属性。如果数字变低，当用户输入负值234时，0仍将被添加，结果为0-234。

Answer 2

没有本地方法可以做到这一点。但是，您可以使用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,output

Answer 3

你也可以使用如下的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" />

希望它有所帮助。

Answer 4

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

它对我有用...也对你也有希望：）

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

4 个答案: