【问题标题】: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">

【问题讨论】:

    标签: html text input resize numbers


    【解决方案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

    适用于textsearchurltelemailpassword,它定义了用户可以输入的最大字符数(作为 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】:

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

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

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

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2016-06-07
            • 2015-06-30
            • 2016-01-21
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多