1密码或RoboForm地址及信用卡表格填写与AngularJS
1密码或RoboForm地址及信用卡表格填写与AngularJS
提问于 2014-10-31 20:59:16
我有一张带有信用卡字段和账单地址字段的表单。它被绑定到一些角度模型并且工作得很漂亮，直到我尝试用密码管理器填充表单字段(我尝试了1 password和RoboForm)。
在下面的表单中，我看到以下行为：
- 1密码:正确输入信用卡信息，但也在姓名、公司、街道地址字段以及城市和州的到期月份中输入信用卡号码。
- RoboForm:用过期年填充CVC字段，用状态填充邮政编码字段。
这是表格：
<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 && 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 && 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 && 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 && 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 && 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 && rc.ccForm.attempted">name required</div>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.organization.$invalid && 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 && 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 && rc.ccForm.attempted">address required</div>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.addressCity.$invalid && 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 && 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 && 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 && 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 && 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 && 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 && 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>我尝试了几种不同的方式来格式化字段，包括各种name和id属性，以及定义在这里的autocomplete字段：https://html.spec.whatwg.org/multipage/forms.html#autofill。Chrome似乎很好地理解了autocomplete属性。
我还尝试添加CVC和邮政编码字段的多个变体进行测试，如果我有大量这些字段，RoboForm就可以正常工作。但一旦我移除其中任何一个字段，它就停止工作了。
如有任何与此相关的经验或与文档的链接，将不胜感激。
Stack Overflow用户
发布于 2014-11-05 19:24:02
1密码将尊重HTML的自动填充规范，因此<input type="text" id="ccexp" autocomplete="cc-exp" />将提示1密码填写所选信用卡的有效期。
有适当的标签是有帮助的，您可以使用<label for="ccexp">Expiry Date:</label><input type="text" id="ccexp" ...>或<label>Expiry Date: <input type="text" ...></label>。
自动完成是首选的，因为它将有助于超过一个1Password的填写。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26683332
复制相关文章
相似问题
腾讯云开发者
