<input type="number"> - HTML: HyperText Markup Language

在此页

值
Additional attributes
Using number inputs
验证
范例
规范
浏览器兼容性
另请参阅
相关话题

<input> elements of type 编号 are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

On browsers that don't support inputs of type 编号 ， 编号 input falls back to type text .

值	A `Number` representing a number, or empty
事件	`change` and `input`
Supported common attributes	`autocomplete` , `list` , `placeholder` , `readonly`
IDL attributes	`list` , `value` , `valueAsNumber`
方法	`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, like so:

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

Additional attributes

In addition to the attributes commonly supported by all <input> types, inputs of type 编号 support these attributes:

属性	描述
`list`	`id` 的 `<datalist>` element that contains the optional pre-defined autocomplete options
`max`	The maximum value to accept for this input
`min`	The minimum value to accept for this input
`placeholder`	An example value to display inside the field when it's empty
`readonly`	A Boolean attribute indicating whether the value is read-only
`step`	A stepping interval to use when using up and down arrows to adjust the value, as well as for validation

`list`

The values of the list attribute is the id 的 <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

`max`

The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation . If the value of the max attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of the min 属性。

`min`

The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation . If a value is specified for min that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of the max 属性。

`placeholder`

placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text 不必 include carriage returns or line feeds.

If the control's content has one directionality ( LTR or RTL ) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm for those characters.

注意： Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in <input>: The Input (Form Input) element 了解更多信息。

`readonly`

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement.value 特性。

注意： Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

`step`

step attribute is a number that specifies the granularity that the value must adhere to, or the special value any , which is described below. Only values which are equal to the basis for stepping ( min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max ).

注意： When the data entered by the user doesn't adhere to the stepping configuration, the 用户代理 may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

The default stepping value for 编号 inputs is 1 , allowing only integers to be entered— unless the stepping base is not an integer.

Using number inputs

<input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper type 值， 编号 , you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.

重要 : Bear in mind that, logically, you should not be able to enter characters inside a number input other than numbers. There seems to be some disagreement about this among browsers; see bug 1398528 .

注意 : It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site 不必 use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have any security implications of any kind.

Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:

A simple number input

In its most basic form, a number input can be implemented like this:

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0">

A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute is used, the input is no longer considered valid when empty.

注意 : Any number is an acceptable value, as long as it is a valid floating point number (that is, not NaN or Infinity ).

Placeholders

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input> . This is where placeholders come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take value . It is displayed inside the edit box when the element's value is "" . Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have an 编号 input with the placeholder " Multiple of 10 ". Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

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

Controlling step size

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10 :

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

In this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.

Specifying minimum and maximum values

可以使用 min and max attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0 , and a maximum of 100 :

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

In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.

Allowing decimal values

One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places). Here's a simple example:

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

See that this example allows any value between 0.0 and 10.0 , with decimals to two places. For example, "9.52" is valid, but "9.521" is not.

Controlling input size

<input> elements of type 编号 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;
}

结果看起来像这样:

Offering suggested values

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 的 <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 属性采用 编号 inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.

验证

We have already mentioned a number of validation features of 编号 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).
可以使用 required attribute to make an empty entry invalid. (In other words, the input must be filled in.)
可以使用 step attribute to constrain valid values to a certain set of steps (e.g., multiples of 10).
可以使用 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, depending on the input 's value:

<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, as a visual indicator of validity.

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

重要 : 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).

Pattern validation

<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 won't be valid if they 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 is 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, onto 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:

let metersInputGroup = document.querySelector('.metersInputGroup');
let feetInputGroup = document.querySelector('.feetInputGroup');
let metersInput = document.querySelector('#meters');
let feetInput = document.querySelector('#feet');
let inchesInput = document.querySelector('#inches');
let 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, an event listener is added to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button's 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.)

注意： When the user clicks the button, the required attribute(s) are removed from the input(s) we are hiding, and empty the value attribute(s). This is so the form can be submitted if both input sets aren't filled in. It also ensures that the form won't submit data that the user didn't mean to.

If you didn't do this, you'd have to fill in both feet/inches and meters to submit the form!

规范

规范	状态	注释
HTML 实时标准 The definition of '<input type="number">' in that specification.	实时标准	初始定义
HTML 5.1 The definition of '<input type="number">' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`type="number"`	Chrome 完整支持 Yes	Edge 完整支持 12	Firefox 完整支持 Yes	IE 完整支持 10	Opera 完整支持 Yes	Safari 完整支持 Yes	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 Yes	Opera Android 完整支持 Yes	Safari iOS 完整支持 Yes	Samsung Internet Android 完整支持 Yes

图例

完整支持

另请参阅

元数据

最后修改： Oct 12, 2020

<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
<input> 类型
HTML 元素
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. <dialog>
  8. ~~<dir>~~
  9. <div>
  10. <dl>
  11. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. <picture>
  4. ~~<plaintext>~~
  5. <pre>
  6. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <rtc>
  4. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <slot>
  8. <small>
  9. <source>
  10. ~~<spacer>~~
  11. <span>
  12. ~~<strike>~~
  13. <strong>
  14. <style>
  15. <sub>
  16. <summary>
  17. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. ~~<xmp>~~

在此页

值