HTML input type number 类型
功能介绍
“number"类型的 <input> 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。
浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
注意：不支持 “number” 类型的浏览器会改用标准的 “text” 输入框。
<input id="number" type="number">
值
填写到输入框中的数值文字的Number表示。你可以通过把一个数字放在value 属性中来设置输入框的默认值，如下:
<input id="number" type="number" value="42">
使用 number 输入框
<input type ="number">元素可以帮助您在构建用户界面和将数字输入到表单中的逻辑时简化你的工作。
当你使用正确的 type 值 “number” 创建数字输入时，会自动验证你输入的文本是否为数字，通常是一组向上和向下按钮。
注意：记住用户可以在幕后修改HTML是至关重要的，因此您的网站不得使用简单的客户端验证来实现任何安全目的。 您必须在服务器端验证所提供的值可能具有任何安全含义的任何事务。
此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。 以下屏幕截图来自Firefox for Android：
一个简单的 number 输入框
在最基本的形式中，数字输入可以像这样实现：
<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0">
数字输入在为空的时候以及输入单个数字时被认为是有效的，但是否则是无效的。 如果使用required属性，则输入在空时不再被视为有效。
占位符
有时，提供一个如何输入表单数据的上下文提示是非常友好的。
尤其当页面所有<input> 元素都没有说明标签时，会非常重要。这就是使用占位符的原因。
占位符是一个通常用于说明一个输入框的 value 应该如何输入的提示值，当元素的 value 为 "” 时，该提示将出现在编辑框里面。 一旦有数据输入到编辑框中，占位符就会消失；如果该框被清空，占位符将重新出现。
这里，我们有一个占位符为"Multiple of 10"的"number" 输入框。请注意当你在编辑字段内容时占位符是如何消失的又是如何重现的。
<input type="number" placeholder="Multiple of 10">
控制步进大小
默认情况下，向上和向下按钮可以将值增加或减小1。您可以通过使用step 属性来更改此步长值。 我们上面的例子中的占位符提示我们其值是10的倍数，所以设置 step 的值为10是合理的：
<input type="number" placeholder="multiple of 10" step="10">
在这个例子中，你会发现上下箭头每次会将其值增加和减少10，而不是1。你仍然可以手动输入一个不是10的倍数的数字，但它会被认为是无效的。
指定最小和最大值
可以使用min 和max 属性指定该字段可以具有的最小值和最大值。 例如，给例子指定最小值为0，最大值为100：
<input type="number" placeholder="multiple of 10" step="10" min="0" max="100">
修改过后，你会发现点击上下按钮不会让你低于0或高于100 . 可以在这些界限之外手动输入数字，但它将被视为无效。
允许小数值
数字输入的一个问题是，步长默认为1——如果你尝试输入带小数的数字，例如"1.0"，则它将被视为无效。 如果要输入一个需要小数的值，则需要修改 step 值（例如，step=“0.01” 以允许2位小数）。 这里有一个简单的例子：
<input type="number" placeholder="1.0" step="0.01" min="0" max="10">
你可以看到这个例子允许0.0到10.0之间的任何值，小数点为2位。本例中，“9.52” 是有效的，但" 9.521" 无效。
控制输入框大小
类型为"number" 的 <input> 元素不支持像 size 之类的调整大小属性。
你必须通过借助 CSS 来改变它们的尺寸大小。
例如，要调整输入框的宽度为仅可输入3位数字的宽度，我们可以在HTML中添加 一个ID并缩短很长的占位符文本，如下：
<input type="number" placeholder="x10" step="10" min="0" max="100" id="number">
然后我们添加一些 CSS 来缩小 id 为 “number” 的元素的宽度:
#number {
width: 3em;
}
提供建议值
您可以提供默认选项的列表，用户可以通过指定list属性来从中进行选择，该属性包含a的ID作为其值，
而ID的每个建议值<datalist>又包含一个<option>元素。
每个option的value对于号码输入框对应的建议值。
<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers">
<span class="validity"></span>
<datalist id="defaultNumbers">
<option value="10045678">
<option value="103421">
<option value="11111111">
<option value="12345678">
<option value="12999922">
</datalist>
并非所有浏览器都支持"number" 输入框的 list 属性。它在 Chrome 和 Opera 中有效，但在 Firefox 中无效。
验证
我们已经提到了数字输入的许多验证功能，但现在让我们对其进行回顾：
<input type="number">元素会自动使所有非数字条目无效（或除非required指定，否则为空）。- 您可以使用该required属性使空条目无效，即必须填写输入。
- 您可以使用该step属性将有效值限制为一组特定的步骤（例如10的倍数）。
- 您可以使用min和max属性将有效值限制在上下限。
以下示例展示了上述所有功能，并在输入值有效/无效时使用了一些CSS来显示有效和无效的图标：
<form>
<div>
<label for="balloons">Number of balloons to order (multiples of 10):</label>
<input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required>
<span class="validity"></span>
</div>
<div>
<input type="submit">
</div>
</form>
尝试提交输入了不同无效值的表单-例如，无值，小于0或大于100的值，非10的倍数的值或非数字值-并查看浏览器给您的错误消息与众不同与不同的。
适用于此示例的CSS如下：
div {
margin-bottom: 10px;
}
input:invalid+span:after {
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
content: '✓';
padding-left: 5px;
}
在这里，我们使用:invalid和 :valid伪类在相邻<span>元素上显示适当的无效或有效图标作为生成的内容，以指示当前值是否有效。
我们将其放在单独的<span>元素上以增加灵活性；
一些浏览器不能在某些类型的表单输入上非常有效地显示生成的内容（例如，阅读有关<input type="date">validation的部分）。
重要提示：HTML表单验证是不是用于服务器端脚本，确保输入的数据是正确的格式的替代品。对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。有人也有可能绕过您的HTML并将数据直接提交到您的服务器。如果您的服务器端代码无法验证接收到的数据，则在提交格式不正确的数据（或数据太大，类型错误的数据，等等）时，灾难可能会发生。
验证模式
<input type="number">元素不支持使用pattern属性来使输入的值符合特定的正则表达式模式。
这样做的理由是，数字输入除了数字之外不能包含其他任何内容，您可以使用minand max属性来约束有效数字的最小和最大数目，如上所述。
示例
我们已经介绍了默认情况下增量为1的事实，您可以使用该step属性允许十进制输入。让我们仔细看看。
在下面的示例中，我们设置了一个用于输入用户身高的表格；它默认接受以米为单位的高度，但是您可以单击相关按钮以将表格更改为接受英尺和英寸。以米为单位的高度输入接受小数点后两位。
HTML看起来像这样：
<form>
<div class="metersInputGroup">
<label for="meters">Enter your height — meters:</label>
<input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required>
<span class="validity"></span>
</div>
<div class="feetInputGroup" style="display: none;">
<span>Enter your height — </span>
<label for="feet">feet:</label>
<input id="feet" type="number" name="feet" min="0" step="1">
<span class="validity"></span>
<label for="inches">inches:</label>
<input id="inches" type="number" name="inches" min="0" max="11" step="1">
<span class="validity"></span>
</div>
<div>
<input type="button" class="meters" value="Enter height in feet and inches">
</div>
<div>
<input type="submit" value="Submit form">
</div>
</form>
您会看到我们正在使用我们早先在文章中已经看过的许多属性。由于我们要接受以厘米为单位的仪表值，因此我们将其设置step为0.01，这样像1.78这样的值就不会被视为无效。我们还为该输入提供了一个占位符。
我们最初使用的是英尺和英寸输入，style=“display: none;“因此米是默认输入类型。
现在到CSS上-这看起来与我们之前看到的验证样式非常相似；这里没有什么特别的：
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid+span:after {
position: absolute;
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
}
最后，JavaScript：
var metersInputGroup = document.querySelector('.metersInputGroup');
var feetInputGroup = document.querySelector('.feetInputGroup');
var metersInput = document.querySelector('#meters');
var feetInput = document.querySelector('#feet');
var inchesInput = document.querySelector('#inches');
var switchBtn = document.querySelector('input[type="button"]');
switchBtn.addEventListener('click', function() {
if(switchBtn.getAttribute('class') === 'meters') {
switchBtn.setAttribute('class', 'feet');
switchBtn.value = 'Enter height in meters';
metersInputGroup.style.display = 'none';
feetInputGroup.style.display = 'block';
feetInput.setAttribute('required', '');
inchesInput.setAttribute('required', '');
metersInput.removeAttribute('required');
metersInput.value = '';
} else {
switchBtn.setAttribute('class', 'meters');
switchBtn.value = 'Enter height in feet and inches';
metersInputGroup.style.display = 'block';
feetInputGroup.style.display = 'none';
feetInput.removeAttribute('required');
inchesInput.removeAttribute('required');
metersInput.setAttribute('required', '');
feetInput.value = '';
inchesInput.value = '';
}
});
在声明了几个变量之后，我们向按钮添加一个事件侦听器以控制切换机制。这非常简单，主要涉及切换按钮类和标签，以及在按下按钮时更新两组输入的显示值。请注意，这里我们不是在米和英尺/英寸之间来回转换，这是现实生活中的Web应用程序可能会做到的。
请注意，当用户单击按钮时，我们required将从隐藏的输入中删除属性，然后清空value属性。这样一来，如果两个输入集都未填写，我们可以提交表单，并且不会提交我们本不想提交的数据。如果我们不这样做，则您必须填写英尺/英寸和米来提交表格！
参考网站:https://developer.mozilla.org/zh/docs/web/html/element/input/number
