html - 为什么输入字段没有以 (xxx) xxx-xxxx 格式显示？

Question

我正在尝试创建一个 html View ，该 View 显示三个表单字段，它们一起收集格式为 (xxx) xxx-xxxx 的美国格式电话号码。

我如何编写 css 才能在使用 css3、bootstrap 和 html5 以及 AngularJS 的应用程序中实现这一点？

我目前的尝试正确地获得了三个输入字段的大小，但完全弄乱了括号 ( 和 ) 的位置，也弄乱了破折号 -。括号和破折号几乎遍布整个屏幕，因为它们几乎位于不同的行中，与输入字段的位置几乎没有关联。 在给定 css3、html5、bootstrap 和 AngularJS 的情况下，为了以 (xxx) xxx-xxx 格式打印输入字段，需要对下面的代码进行哪些具体更改？

            <div class="row">
                <div class="col-sm-1">
                    (<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="3" size="3" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.onlyNumbers" required />)
                </div>
                <div class="col-sm-1">
                    <input class="form-control" type="text" id="phonenum2" name="phonenum2" maxlength="3" size="3" ng-model="auth.resultphone.phonenum2" ng-pattern="auth.onlyNumbers" required />-
                </div>
                <div class="col-sm-1">
                    <input class="form-control" type="text" id="phonenum3" name="phonenum3" maxlength="4" size="4" ng-model="auth.resultphone.phonenum3" ng-pattern="auth.onlyNumbers" required />
                </div>
            </div>

这是上面代码当前在 View 中打印的打印屏幕:

相比之下，正确的输出会将所有三个字段放在同一行的正确标点符号内，格式为 (phonenum1) phonenum2-phonenum3

---

持续的努力:

---

此外，如果我采纳@Pauli_D 的建议并使用 RegEx \d{3}[\-]\d{3}[\-]\d{4} 偏离 OP , AngularJS 表单验证只是部分有效。例如，在下面代码的 phonenum1 输入中键入 ANYTHING 会导致 View 显示 Please enter a phone number in the format 111-222-3333 警告，但是当您输入格式为 111-222-3333 的数字时，警告不会消失。以下是尝试@Paulie_D 建议的 View 中的代码:

    <form name="confirmForm" ng-submit="auth.confForm(confirmForm.$valid)" novalidate>
        <div class="form-group">
            <div class="row">
                <label for="auth.resultphone.phonenum1">Cell Phone number:</label>
            </div>
            <div class="row">
                <div class="col-sm-3">
                    <input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="12" size="12" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.usPhone" required />
                </div>
            </div>
            <div class="row">
                <p ng-show="confirmForm.phonenum1.$error.required && !confirmForm.phonenum1.$pristine" class="help-block">Area code of cell phone number is required.</p>
                <p ng-show="!confirmForm.phonenum1.$valid && !confirmForm.phonenum1.$pristine" class="help-block">Phone number must be in the format 111-222-3333.</p>

                <button type="submit" class="btn btn-primary" ng-disabled="confirmForm.$invalid" >Submit</button>
            </div>
        </div>
    </form>  

这是服务 auth.js 中的变量声明:

this.usPhone = "\d{3}[\-]\d{3}[\-]\d{4}";

使用@PaulieD 修改后的 AngularJS 代码给出了以下打印屏幕。请注意，Submit 按钮仍处于阴影状态，因此无法提交表单:

那么还需要进行哪些其他更改？

Answer 1

至于css对齐问题...

.col-sm-1 {
  padding-right: 0;
}

input[size='3'] {
  width: 75%;
  min-width: 75%;
  padding: 0;
  display: inline;
}

http://codepen.io/anon/pen/adPrey