表单字段输入数字通过在前面添加零自动转换为 3 位数字[重复]答案

【问题标题】：Form field input number automatically convert to 3-digit by adding zero's in front [duplicate]表单字段输入数字通过在前面添加零自动转换为 3 位数字[重复]
【发布时间】：2013-09-16 13:05:08
【问题描述】：

我正在尝试制作一个表单，用户可以在其中输入页码并跳转到由其 div ID 标识的特定页面。

<form id="gotopage" class="uniForm">
    <input id="pagenumber" name="pagenumber" value="" size="10" type="text" />
</form>
<script>
$(document).ready(function() {
     $('#gotopage').submit( function() {              
          goUrl = 'index.html#pg-' + $('#pagenumber').val().toLowerCase();
          window.location = goUrl;
          return false;  // Prevent the default form behaviour
     });
});
</script>

我可以让它很好地工作，除非我以 3 位数的方式命名我的 ID：

<div id="pg-001">、<div id="pg-002>、<div id="pg-003"> 等等。

有没有办法调整我上面的代码，以便我可以告诉它添加相关的零来为用户输入的任何数字组成一个 3 位数字？

提前谢谢你。

【问题讨论】：

标签： javascript jquery html forms input

【解决方案1】：

你可以像这样为它创建一个函数：

function padNum(num,length)
{
    length = length || 3;num+="";
    while(num.length < length) num="0"+num;
    return num;
}

例子：

var newid = padNum(3);//003
var newid = padNum(3,4);//0003

如果需要，可以使用更短（但不太清晰）的功能

function padNum(num,length)
{
    return Array((length||3)-((num+"").length-1)).join("0")+num;
}

注意：函数在未指定时默认长度参数为3

【讨论】：

【解决方案2】：

使用了这个代码：

function pad (str, max) {
  return str.length < max ? pad("0" + str, max) : str;
}

输出：

pad("12", 3);    // => "012"


<form id="gotopage" class="uniForm">
    <input id="pagenumber" name="pagenumber" value="" size="10" type="text" />
</form>
<script>
$(document).ready(function() {
     $('#gotopage').submit( function() {              
          goUrl = 'index.html#pg-' + pad($('#pagenumber').val().toLowerCase(),3);
          window.location = goUrl;
          return false;  // Prevent the default form behaviour
     });
});
</script>

【讨论】：

我喜欢递归。

【解决方案3】：

var num = $('#pagenumber').val().toLowerCase();
var len = num.length;
var result = [0, 0].slice(0, len < 4 ? 3 - len : 0).join('') + num;

Fiddle

【讨论】：