CSS 格式化 SSN 表单输入

Question

我有一个用 HTML5 和 CSS3 编写的表格，其中有一些非常具体的字段（SSN、Phone 号码、首字母），长度各不相同。我正在尝试弄清楚如何格式化输入字段，使其只有 X 个字符长，具体取决于输入（SSN 为 11，Initial 为 1，ZIP 为 5...等）

我知道您过去可以设置 size="11" 并且输入字段（不是标签）将设置为该大小，但是这似乎已被禁用或正在被 BS3 覆盖。

关于如何实现这一点有什么建议吗？

我目前的代码是：

                    <div class="form-group">
                    <label class="control-label" for="SSN">SSN:</label>
                    <input type="email" class="form-control" id="SSN" placeholder="###-##-####" size="12">
                </div>

但这似乎不起作用，如果我尝试 class="col-sm-2"（或与此相关的任何其他数字），格式就会变得很傻（在某些情况下没有正确排列例）。

提前致谢。

Answer 1

由于您标记了 html5，您可以使用：

<div class="form-group">
     <label class="control-label" for="SSN">SSN:</label>
     <input type="email" class="form-control" id="SSN" placeholder="###-##-####" maxlength="12">
</div>

顺便说一下，class="col-sm-2" 是一个 bootstrap class，它定义了一个元素应该跨越的列数。访问 http://getbootstrap.com 了解更多信息。

确保您的 html 文档类型是：<!doctype html> 或多或少意味着 'use html5'.

CSS 格式化 SSN 表单输入

CSS to format SSN form input

html

css

field

input