此页面上有脚本错误。虽然它是写给网站编辑,您可以在下面查看部分内容。

这篇翻译不完整。请帮忙从英语翻译这篇文章

"number"类型的 <input> 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头,让用户可以使用鼠标增加和减少输入的值,或者只需用指尖敲击即可。

注意:不支持 "number" 类型的浏览器会使用标准的 "text" input 作为备选

<input id="number" type="number">

Value A Number representing a number, or empty
Events change and input
Supported Common Attributes autocomplete, list, placeholder, readonly
IDL attributes list, value, valueAsNumber
Methods select(), stepUp(), stepDown()

A Number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the value attribute, 像下面这样:

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

数字输入在为空的时候以及输入单个数字时被认为是有效的,但是否则是无效的。 如果使用{{ htmlattrxref(''required,''input'') }}属性,则输入在空时不再被视为有效。

注:任何数字都是可接受的值,只要它是有效的浮点数(即不是NaN或无穷大Infinity)。

占位符

有时,提供关于输入数据应采取何种形式的上下文提示是有帮助的。 如果页面设计不为每个{{ HTMLElement("input") }}提供描述性标签,这可能尤其重要。 这是占位符来的地方。占位符是一个值,它通过展示有效值的示例来演示该值应该采用的值,当元素的值为“”时,该值将显示在编辑框内。 一旦数据输入框中,占位符消失; 如果该框被清空,占位符将重新出现。

数字输入框的默认值 (placeholder) 为"Multiple of 10"。 默认值的内容在被编辑时会自动消失或重新出现。

<input type="number" placeholder="Multiple of 10">

控制步进尺寸

默认情况下,为你提供的向上和向下按钮可以上下移动数值,上下移动值为1.您可以通过提供{{ htmlattrxref(“step”,“input”) }}属性来更改此值 ,它的步长值的是数字。 我们上面的例子包含一个默认值,它表示值是"Multiple of 10",所以添加10的步长值是有意义的:

<input type="number" placeholder="multiple of 10" step="10">

在这个例子中,你会发现上下箭头会增加和减少10,而不是1.你仍然可以手动输入一个不是10的倍数的数字,但它会被认为是无效的。

指定 最小&最大 值

可以使用{{ htmlattrxref("min","input") }} 和{{ htmlattrxref("max","input") }} 属性指定该字段可以具有的最小值和最大值。 例如,给例子指定最小值为0,最大值为100:

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100">

修改过后,你会发现点击上下按钮不会让你低于0或高于100 . 可以在这些界限之外手动输入数字,但它将被视为无效。

允许 小数值

数字输入的一个问题是,默认步长为1 - 如果你尝试输入带小数的数字,例如"1.0",则它将被视为无效。 如果要输入一个需要小数的值,则需要在步长的值中修改(例如,step ="0.01"以允许小数点到小数点后两位)。 这里有一个简单的例子:

<input type="number" placeholder="1.0" step="0.01" min="0" max="10">

看到这个例子允许0.0到10.0之间的任何值,小数点到两个地方。 "9.52"是有效的,但" 9.521"不是,例如。

控制 input 尺寸

<input> elements of type "number" don't support form sizing attributes such as size. You'll have to resort to CSS to change the size of these controls.

For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:

<input type="number" placeholder="x10" step="10" min="0" max="100" id="number">

Then we add some CSS to narrow the width of the element with the ID "number":

#number {
  width: 3em;
}

The result looks like this:

提供建议值

You can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the ID of a <datalist>, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the number entry box.

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

Use of the list attribute with "number" inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.

验证

We have alread mentioned a number of validation features of number inputs, but let's review them now:

  • <input type="number"> elements automatically invalidate any entry that isn't a number (or empty, unless required is specified).
  • You can use the required attribute to make an empty entry invalid, i.e. the input has to be filled in.
  • You can use the step attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).
  • You can use the min and max attributes to constrain valid values to lower and upper bounds.

The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:

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

Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.

The CSS applied to this example is as follows:

div {
  margin-bottom: 10px;
}

input:invalid+span:after {
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  content: '✓';
  padding-left: 5px;
}

Here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, indicating if the current value is valid. We put it on a separate <span> element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on <input type="date"> validation).

Important: HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

验证模式

<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.

范例

We've already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.

The HTML looks like this:

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

You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the step value to 0.01, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.

We've hidden the feet and inches inputs initially using style="display: none;" so that meters is the default entry type.

Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:

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;
}

And finally, the 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 = '';
  }
});

After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.

Note that when the user clicks the button, we remove the required attribute(s) from the input(s) we are hiding, and empty the value attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches and meters to submit the form!

规范

Specification Status Comment
HTML Living Standard
<input type="number">
Living Standard Initial definition
HTML 5.1
<input type="number">
Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) 10 (Yes) (Yes)
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc.)
Basic support (Yes) (Yes) (Yes) (Yes) ? (Yes) (Yes)

相关链接

文档标签和贡献者

 此页面的贡献者: XXXS, hmzll, Ende93, xgqfrms-GitHub
 最后编辑者: XXXS,