html - 具有三个文本字段的主要电话号码

Question

我想创建以下内容:

我做了如下操作:

<span>* Primary Phone:</span>
        <input name="prim1" type="text" id="prim1" class="required">
        <input name="prim2" type="text" id="prim2" class="required">
        <input name="prim3" type="text" id="prim3" class="required">

但是我得到:

我想通过指定宽度来缩小文本，但它并没有这样做。我还需要一种使用 jQuery 对此进行验证的方法，如果它是一个单独的文本字段，我该怎么做？

Answer 1

我不建议只在所有必填字段上设置宽度，我相信您需要更新您的 html 以更好地反射(reflect)您想要传达的内容，我不一定会在 CSS 中这样做，因为这是数据即使没有样式也应该存在。我会做类似的事情:

<span>* Primary Phone:</span>
<input name="prim1" type="text" id="prim1" size="3" class="required">
<input name="prim2" type="text" id="prim2" size="3" class="required">
<input name="prim3" type="text" id="prim3" size="4" class="required">

看看this为什么输入大小可以接受，而字体大小通常 Not Acceptable 。

有关验证和防止无效字符的更多信息，我会使用 JQuery Validation或内置掩码的 Autotabber(如 http://www.mathachew.com/sandbox/jquery-autotab/)。