AngularJS의 1Password 또는 RoboForm 주소 및 신용 카드 양식

Question

신용 카드 입력란과 청구서 수신 주소란이있는 양식이 있습니다. 그것은 일부 앵글 모델에 묶여 있으며 패스워드 매니저 (나는 1Password와 RoboForm을 시도했다)로 폼 필드를 채우기 전까지는 아름답게 작동한다. 아래의 양식으로

, 나는 다음과 같은 동작을 참조하십시오

• 1Password : 신용 카드 정보를 올바르게 입력, 그러나 또한 이름, 회사 및 주소 필드에 신용 카드 번호에두고있다, 그리고 도시와 주에서의 만료 월. 내가 포함하여 필드를 포맷하는 여러 가지 방법을 시도

  <form class="form" rc-submit="submitCC()" name="ccForm" id="ccForm" novalidate> 
      <div class="cardback"> 
       <div class="title">Credit Card Details</div> 
       <div class="form-row with-label" ng-class="{'has-error': numberInvalid || (ccForm.ccNumber.$invalid &amp;&amp; rc.ccForm.attempted)}"> 
        <input id="cc-number" class="form-control" type="text" name="ccNumber" ng-model="card.number" data-stripe="number" required size="20" autocomplete="cc-number" /> 
        <label class="form-label">card number</label> 
        <div class="validation-error" ng-show="numberInvalid">the credit card number is invalid</div> 
       </div> 
       <div class="form-row for-inline"> 
        <div class="form-row inline with-label month" ng-class="{'has-error': ccForm.ccExpMonth.$invalid &amp;&amp; rc.ccForm.attempted}"> 
         <select id="cc-exp-month" class="form-control" ng-model="card.expMonth" name="ccExpMonth" data-stripe="exp-month" ng-options="m for m in expMonths" required autocomplete="cc-exp-month"> 
          <option value="">MM</option> 
         </select> 
         <label class="form-label">exp month</label> 
         <div class="select-arrow"></div> 
        </div> 
        <div class="form-row inline with-label year" ng-class="{'has-error': ccForm.ccExpYear.$invalid &amp;&amp; rc.ccForm.attempted}"> 
         <select id="cc-exp-year" class="form-control" ng-model="card.expYear" name="ccExpYear" data-stripe="exp-year" ng-options="y for y in expYears" required autocomplete="cc-exp-year"> 
          <option value="">YYYY</option> 
         </select> 
         <label class="form-label">exp year</label> 
         <div class="select-arrow"></div> 
        </div> 
        <div class="form-row inline with-label cvc" ng-class="{'has-error': ccForm.ccCsc.$invalid &amp;&amp; rc.ccForm.attempted}"> 
         <input id="csc" class="form-control" type="text" name="csc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
         <label class="form-label">cvc</label> 
        </div> 
        <!-- 
        <input id="cc-csc" class="form-control" type="text" name="ccCsc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
        <input id="securityCode" class="form-control" type="text" name="securityCode" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
        <input id="csc" class="form-control" type="text" name="csc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
        <input id="cvc" class="form-control" type="text" name="cvc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
        <input id="cardCode" class="form-control" type="text" name="cardCode" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
        <input id="code" class="form-control" type="text" name="code" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/> 
        --> 
       </div> 
      </div> 
  
      <div class="billing-title">Billing Address</div> 
      <div class="form-row with-label" ng-class="{'has-error': ccForm.name.$invalid &amp;&amp; rc.ccForm.attempted}"> 
       <input id="name" class="form-control" type="text" name="name" required ng-model="card.billingName" autocomplete="name"/> 
       <label class="form-label">name</label> 
       <div class="validation-error" ng-show="ccForm.name.$invalid &amp;&amp; rc.ccForm.attempted">name required</div> 
      </div> 
      <div class="form-row with-label" ng-class="{'has-error': ccForm.organization.$invalid &amp;&amp; rc.ccForm.attempted}"> 
       <input id="organization" class="form-control" type="text" name="organization" ng-model="card.billingCompany" autocomplete="organization"/> 
       <label class="form-label">company (optional)</label> 
      </div> 
      <div class="form-row with-label" ng-class="{'has-error': ccForm.addressLine1.$invalid &amp;&amp; rc.ccForm.attempted}"> 
       <input id="address-line1" class="form-control" type="text" name="addressLine1" required ng-model="card.billingAddress" autocomplete="address-line1"/> 
       <label class="form-label">street address</label> 
       <div class="validation-error" ng-show="ccForm.addressLine1.$invalid &amp;&amp; rc.ccForm.attempted">address required</div> 
      </div> 
      <div class="form-row with-label" ng-class="{'has-error': ccForm.addressCity.$invalid &amp;&amp; rc.ccForm.attempted}"> 
       <input id="address-level2" class="form-control" type="text" name="addressCity" required ng-model="card.billingCity" autocomplete="address-level2"/> 
       <label class="form-label">city</label> 
       <div class="validation-error" ng-show="ccForm.addressCity.$invalid &amp;&amp; rc.ccForm.attempted">city required</div> 
      </div> 
      <div class="form-row for-inline"> 
       <div class="form-row inline with-label state" ng-class="{'has-error': ccForm.state.$invalid &amp;&amp; rc.ccForm.attempted}"> 
        <input id="address-level1" class="form-control" type="text" name="state" ng-model="card.billingState" autocomplete="address-level1"/> 
        <label class="form-label">state</label> 
       </div> 
       <div class="form-row inline with-label zip" ng-class="{'has-error': ccForm.postalCode.$invalid &amp;&amp; rc.ccForm.attempted}"> 
        <input id="zip" class="form-control" type="text" name="zip" required ng-model="card.billingZip" autocomplete="postal-code"/> 
        <label class="form-label">zip</label> 
        <div class="validation-error" ng-show="ccForm.postalCode.$invalid &amp;&amp; rc.ccForm.attempted">zip required</div> 
       </div> 
       <!-- 
       <input id="postal-code" class="form-control" type="text" name="postalCode" required ng-model="card.billingZip" autocomplete="postal-code"/> 
       <input id="zipCode" class="form-control" type="text" name="zipCode" required ng-model="card.billingZip" autocomplete="postal-code"/> 
       <input id="zip" class="form-control" type="text" name="zip" required ng-model="card.billingZip" autocomplete="postal-code"/> 
       --> 
       <div class="form-row inline with-label country" ng-class="{'has-error': ccForm.countryName.$invalid &amp;&amp; rc.ccForm.attempted}"> 
        <input id="country-name" class="form-control" type="text" name="countryName" value="USA" required ng-model="card.billingCountry" autocomplete="country-name"/> 
        <label class="form-label">country</label> 
        <div class="validation-error" ng-show="ccForm.countryName.$invalid &amp;&amp; rc.ccForm.attempted">country required</div> 
       </div> 
      </div> 
  
      <div class="form-row spaced"> 
       <button class="constructive" type="submit" ng-disabled="ccInProgress">confirm payment</button> 
      </div> 
  </form> 
  

  :

• RoboForm은이 : 양식 만료 연도와 CVC 필드와 상태 여기

와 우편 번호 필드를 채우고있다 다양한 name 및 id 속성뿐만 아니라 여기에 정의 된 autocomplete 필드는 https://html.spec.whatwg.org/multipage/forms.html#autofill입니다. Chrome은 autocomplete 속성을 잘 이해하고있는 것으로 보입니다.

또한 CVC 및 우편 번호 필드를 여러 가지 변형하여 테스트 해 보았습니다. 이러한 필드가 많으면 RoboForm이 올바르게 작동합니다. 하지만 그 필드 중 하나를 제외한 모든 필드를 제거하는 즉시 작동을 멈 춥니 다.

문서 또는 문서 링크를 사용하여 경험을 쌓은 사람이라면 대단히 감사하겠습니다.

Answer 1

1password는 HTML's autofill spec이므로 <input type="text" id="ccexp" autocomplete="cc-exp" />은 선택한 신용 카드의 만료일을 채우기 위해 1Password를 암시합니다.

적절한 레이블이 있으면 <label for="ccexp">Expiry Date:</label><input type="text" id="ccexp" ...> 또는 <label>Expiry Date: <input type="text" ...></label>을 사용할 수 있습니다.

자동 완료은 1Password 이상을 채우는 데 도움이되므로 바람직합니다.