html5默认输入数字_HTML5数字输入

html5默认输入数字

The HTML5 number input creates a validated input for integers and floating point numbers in web forms. The basic syntax of the element is simple:

HTML5 number输入为Web表单中的整数和浮点数创建经过验证的输入。 元素的基本语法很简单：

<input type="number" name="int">

默认值和可访问性 (Defaults & Accessibility)

In most cases it’s a good idea to present a default value for the number input; general accessibility principles also apply:

在大多数情况下，最好为number输入提供一个默认值。 一般可访问性原则也适用：

<label accesskey="b">
How many boys are brought to the yard by your milkshake?
<input name="boys" id="boys" type="number" value="3">
</label>

If a browser fully supports the input type, “spinner” UI controls are presented, which will raise and lower the value of the input. If the element has focus, using the up / down cursor keys and a wheel mouse will have the same effect. Note that not all browsers support this UI pattern: iOS 6, for example, supports the number input but does not present up / down arrows, likely due to space considerations.

如果浏览器完全支持输入类型，则会显示“ spinner” UI控件，这些控件将提高和降低输入的值。 如果元素具有焦点，则使用上/下光标键和滚轮鼠标将具有相同的效果。 请注意，并非所有浏览器都支持此UI模式：例如，iOS 6支持number输入，但由于空间原因，它不显示向上/向下箭头。

限制输入 (Limiting The Input)

By default, the number input will take an infinite range of values, including negative integers. In most cases, this range should be limited by using min and max attributes:

默认情况下， number输入将采用无限范围的值，包括负整数。 在大多数情况下，应使用min和max属性限制此范围：

<input type="number" value="1" min="1" max="12" name="int">

As a broad rule, a limited number input should support no more than a dozen valid integer values before adding some form of explicit direction: otherwise, you’ll tend to find that users click on the up / down arrows endlessly to reach a value, rather than typing it in directly. As an example, a control for a vehicle collision simulator:

一般而言，在添加某种形式的显式指示之前，有限number输入应支持不超过十二个有效整数值：否则，您会发现用户无休止地单击向上/向下箭头以获取一个值，而不是直接输入。 例如，用于车辆碰撞模拟器的控件：

<label>Enter the velocity of the car in kilometers per hour (0 – 120).
<input type="number" value="30" min="0" max="120" name="velocity">
</label>

The values can also be controlled by a step attribute, which will force values into a particular progression:

值也可以由step属性控制，这将迫使值进入特定的级数：

<label>Crystalware must be ordered in pairs. Please enter the number you wish to order:
<input type="number" value="2" min="2" max="24" step="2" name="glasses">
</label>

Now the up-down arrows for the element will only generate even numbers. Using step will also influence form validation: manually entering 3 into the example above should generate an error after the user presses the submit button.

现在，该元素的上下箭头将仅生成偶数。 使用step也会影响表单验证：在上面的示例中手动输入3会在用户按下“提交”按钮后产生错误。

By default, the number input increments, decrements and validates whole numbers. step also allows the field to generate and accept floating point values:

默认情况下， number输入递增，递减并验证整数。 step还允许字段生成并接受浮点值：

<label>Weight (kilos):
<input type="number" value="1" min="0" max="12" step=".1" name="weight">
</label>

将输入限制为有效键 (Restricting Input to Valid Keys)

One potentially confusing feature is that the number input will accept text as entered data. While it will be flagged as invalid once the user submits the form, you may wish to avoid the possibility entirely by using JavaScript to filter any data entered into the field on keydown:

一个潜在的混乱特征是number输入将接受文本作为输入数据。 尽管一旦用户提交表单，它将被标记为无效，但是您可能希望通过使用JavaScript过滤掉keydown字段中输入的任何数据来完全避免这种可能性：

function isNumber(event) {
if (event) {
	var charCode = (event.which) ? event.which : event.keyCode;
	if (charCode != 190 && charCode > 31 &&
(charCode < 48 || charCode > 57) &&
(charCode < 96 || charCode > 105) &&
(charCode < 37 || charCode > 40) &&
 charCode != 110 && charCode != 8 && charCode != 46 )
	return false;
	}
return true;
}

On the input itself:

在输入本身上：

<input type="number" onkeydown="return isNumber(event);">

This will prevent non-numeric characters from being entered into the field (decimal points excepted), while cursor controls and the return key will still work in the element as expected.

这样可以防止在字段中输入非数字字符(小数点除外)，而光标控件和返回键仍将按预期在元素中起作用。

Similarly, it is also possible to manually enter numbers beyond the range of min and max into a number field. Again, such entries will be flagged as invalid on submit; preemptively preventing this behaviour requires a little more JavaScript, which I would combine with the previous script above:

同样，也可以在number字段中手动输入超出min和max范围的number 。 同样，此类条目在提交时将被标记为无效； 先发制人地防止这种行为需要更多JavaScript，我将与上面的先前脚本结合使用：

function isNumber(event, element) {
	if (event) {
		var max_chars = element.getAttribute("max").length;  
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode != 190 && charCode > 31 &&
(charCode < 48 || charCode > 57) &&
(charCode < 96 || charCode > 105) &&
(charCode < 37 || charCode > 40) &&
charCode != 110 && charCode != 8 && charCode != 46 ) {
	return false;
}
if (element.value.length >= max_chars && charCode > 47) { 
	return false;
	} else {
	return true;
	}
}
}

The HTML is modified to:

HTML修改为：

<input type="number" onkeydown="return isNumber(event,this);" step="1" min="0" max="99">

I’ll have more to say about charCodes and detecting keypresses in a future article.

在以后的文章中，我将更多地讨论charCodes和检测按键。

设置输入样式 (Styling The Input)

The number input is automatically sized to accept a very high range of numbers, up to 10¹⁴, including scientific notation. Limiting the input with min and max should change the size of the element to fit the expected range, but you may want to provide a backup in CSS:

number输入的大小会自动调整，以接受很大范围的数字，最多10 ^14个数字，包括科学计数法。 用min和max限制输入应该更改元素的大小以适合期望的范围，但是您可能希望在CSS中提供备份：

input[type="number"] { width: 2rem; }

Note that (at least officially) you cannot use the size attribute to modify the appearance of elements in HTML5, as it is no longer valid.

请注意(至少正式使用)，您不能使用size属性来修改HTML5中元素的外观，因为它不再有效。

The entire panoply of CSS can be applied to the number input. In theory, the up and down arrows can also be styled, although our ability to do so is limited at the moment. The following CSS will remove the spinners in Webkit:

CSS的整个全景可以应用于number输入。 从理论上讲，也可以设置上下箭头的样式，尽管我们目前的能力有限。 以下CSS将删除Webkit中的微调器：

input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
}

Alternatively, you could use a variation of the JavaScript above applied to a standard text input with a regular expression pattern, which will not show spinners by default.

或者，您可以使用上面JavaScript变体，将其应用于具有正则表达式模式的标准文本输入，默认情况下不会显示微调框。

<input type="text" pattern="[0-9]*">

建立跨浏览器兼容性 (Building Cross-Browser Compatibility)

number has touch-and-go support at the moment: some browsers support it fully (Chrome, Firefox 29+), others partially, and still others not at all. Implementations are still being worked on; the best solution I’ve found is a polyfill by Jon Stipe; the only disadvantage of which is a dependence on JQuery.

number提供了即按即用的支持：某些浏览器完全支持它(Chrome，Firefox 29+)，其他一些则完全支持它。 实施仍在进行中； 我找到的最好的解决方案是Jon Stipe的polyfill ; 唯一的缺点是依赖JQuery。

翻译自: https://thenewcode.com/748/The-HTML5-number-Input

html5默认输入数字