爲什麼不以格式（xxx）xxx-xxxx顯示輸入字段？

我正在嘗試創建一個html視圖，它顯示了三種格式的字段，它們一起收集格式爲（xxx）xxx-xxxx的美國格式的電話號碼。爲什麼不以格式（xxx）xxx-xxxx顯示輸入字段？

如何在css3，bootstrap和html5與AngularJS一起使用的應用程序中編寫css？

我現在嘗試正確獲取三個輸入字段大小，而是完全攪亂括號(和)的位置，也打亂了短跑-的位置。零星和破折號幾乎放在屏幕上，因爲它們幾乎在不同的行中，與輸入字段的位置很少或沒有關聯。 需要對以下代碼進行哪些特定更改才能以的格式打印輸入字段，給定css3，html5，bootstrap和AngularJS？

  <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>

以下是對上面的代碼，目前在視圖中打印的打印屏幕：

相比之下，正確的輸出會把所有三個領域上在同一行在模式(phonenum1) phonenum2-phonenum3

ONGOIN正確的標點符號摹努力：

另外，如果我拿@ Pauli_D的建議，並通過使用正則表達式\d{3}[\-]\d{3}[\-]\d{4}從OP偏離時，AngularJS表單驗證只是部分有效。例如，在以下代碼的輸入phonenum1中輸入ANYTHING將導致該視圖顯示Please enter a phone number in the format 111-222-3333警告，但當您輸入格式爲111-222-3333的格式的數字時，該警告不會消失。下面是該視圖中的代碼試圖@ Paulie_D的建議：

<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按鈕依然陰影，這樣的形式還不能提交：

所以要做出什麼樣的改變需要什麼？

來源

2016-02-11 CodeMed

輸入模式......讀了。 –

@Paulie_D上面的代碼已經使用'ng-pattern =「auth.onlyNumbers」'檢查數字輸入。我在詢問觀點，而不是表單驗證。該視圖需要是'（phonenum1）phonenum2-phonenum3'。 – CodeMed

我不是在談論驗證，而是輸入模式屬性 - http://html5doctor.com/html5-forms-introduction-and-new-attributes/和http：// html5pattern。com/Phones –

對於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

來源

2016-02-12 00:45:01 CreativeCreate

爲什麼不以格式（xxx）xxx-xxxx顯示輸入字段？

回答

相關問題