输入类型“数字”不会调整大小

Posted 2023-02-21

【中文标题】输入类型“数字”不会调整大小

【英文标题】：Input type "number" won't resize

【发布时间】：2014-05-07 17:39:07

【问题描述】：

为什么当我将类型更改为 type="number" 时我的输入不会调整大小，但它适用于 type="text"？

EXAMPLE

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

【参考方案1】：

好像input类型number不支持size属性或者浏览器不兼容，你可以通过CSS来设置：

input[type='number']
    width: 80px;
 

Updated Fiddle

【讨论】：

太棒了！这可以完成工作。还有一件我刚刚注意到的小事。数字类型也不允许像文本一样的最大数量限制。有没有办法解决这个问题？

它确实支持它，你可以在这里看到所有支持的值：w3.org/TR/html-markup/input.number.html

我有maxlength="4"，但它没有像text那样生效

哦，不支持maxlength，只支持max属性。

如果您想定位特定尺寸，请使用：input[type=number][size="3"] width: 3em; 等

【参考方案2】：

你想要的是maxlength。

适用于text、search、url、tel、email 和 password，它定义了用户可以输入的最大字符数（作为 UTF-16 代码单元）场。这必须是整数值 0 或更高。如果未指定 maxlength，或者指定了无效值，则该字段没有最大长度。此值也必须大于或等于 minlength 的值。

您可以考虑使用其中一种input 类型。

【参考方案3】：

将 type="number" 更改为 type="tel"

【参考方案4】：

不正确的用法。

通过上下箭头输入类型编号，使其具有可选值。

所以基本上你正在寻找 "width" CSS 样式。

历史上输入文本是用等宽字体格式化的，所以它的大小也是它所需要的宽度。

输入数字是新的，“大小”属性根本没有意义*。典型用法：

<input type="number" name="quantity" min="1" max="5">

w3c docs

要修复，添加样式：

<input type="number" name="email" style="width: 7em">

编辑：如果你想要一个范围，你必须设置type="range" 而不是="number"

EDIT2: *size 不是一个允许的值（所以，没有意义）。 查看官方W3C specifications

注意：size 属性适用于以下输入类型：文本、 搜索、电话、网址、电子邮件和密码。

提示：指定允许的最大字符数 元素，使用 maxlength 属性。

【讨论】：

在数字输入中说大小“根本没有用”是一个延伸。如果你有一个通常值在 2 到 4 之间的数字输入（这很常见），你就无法控制标准尺寸，而且整个事情都是巨大的。输入永远不会得到任何爱，似乎......所以“解决方案”只是使用文本，即使你真的只想要数字。并非每个页面设计都基于使所有输入都具有很大的宽度，并且必须指定所有数字输入的宽度是一种回归。

这正是 size 属性的用途，它比用类填充所有输入和用几十种尺寸填充整个 css 同时通过浏览器计算所有不同的输入差异要好得多:) （不，范围与它无关）

关键是删除大小是愚蠢的，不是因为“它没有用”。

我知道。我的评论旨在澄清您在答案中包含的内容不正确。

很棒的修复，style='width:80' 非常感谢

【参考方案5】：

使用 onkeypress 事件。邮政编码框的示例。它最多允许 5 个字符，并检查以确保输入仅为数字。

当然，没有什么比服务器端验证更好的了，但这是一个不错的方法。

function validInput(e) 
  e = (e) ? e : window.event;
  a = document.getElementById('zip-code');
  cPress = (e.which) ? e.which : e.keyCode;

  if (cPress > 31 && (cPress < 48 || cPress > 57)) 
    return false;
   else if (a.value.length >= 5) 
    return false;
  

  return true;

#zip-code 
  overflow: hidden;
  width: 60px;

<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">

【参考方案6】：

设置数字输入的最大值和最小值，而不是设置长度。

然后输入框调整大小以适应最长的有效值。

如果您想允许 3 位数字，请将 999 设置为最大值

 <input type="number" name="quantity" min="0" max="999">

【讨论】：

这是我在 android 上为移动 Chrome 工作的唯一方法。

这是正确答案。如果您使用 CSS 指定确切的宽度，它可能不会在所有浏览器中看起来都像您想要的那样。 （例如，有些会使用更宽的上下箭头。）除非您需要固定尺寸，否则最安全的方法是让浏览器根据允许的值选择宽度。

【参考方案7】：

对于<input type=number>，HTML5 CR 不允许使用size 属性。然而，在Obsolete features 中它说：“作者不应该，但可以尽管在本规范的其他地方有相反的要求，在类型属性处于数字状态的输入元素上指定 maxlength 和 size 属性。不管怎样，使用这些属性的一个正当理由是帮助不支持 type="number" 的输入元素的旧版用户代理仍然以有用的宽度呈现文本字段。”

因此，可以使用size 属性，但它只影响不支持type=number 的旧浏览器，因此该元素回退到一个简单的文本控件<input type=text>。

这背后的基本原理是，浏览器应该提供一个考虑其他属性的用户界面，以获得良好的可用性。由于实现可能会有所不同，作者强加的任何大小都可能使事情变得混乱。 （这也适用于在 CSS 中设置控件的宽度。）

结论是，您应该在或多或少的流动设置中使用<input type=number>，该设置不对元素的尺寸做出任何假设。