在 Cordova Android 和 iOS 应用程序上为输入字段添加自动完成功能答案

【问题标题】：Adding autocomplete to input fields on Cordova Android and iOS app在 Cordova Android 和 iOS 应用程序上为输入字段添加自动完成功能
【发布时间】：2022-06-18 00:10:10
【问题描述】：

我在 Android 和 iOS 上都有一个带有注册表单的 Ionic/Cordova 应用程序。为了简化注册表单，我尝试将autocomplete='auto-fill-field' 添加到每个输入字段，但到目前为止我还无法让它们工作。

我的应用正在使用 Cordova 提供的所有最新 Web 视图。

是否可以让标准 Web 输入自动完成字段在捆绑的 Cordova 应用程序上工作？如果是这样，怎么做？我的预感是它不起作用，因为 webviews 无法访问标准的 chrome/safari 浏览器。我看到很多关于它的帖子，但我审查过的帖子中没有一个能够让它为我工作。

这是我目前的注册表单：

    <div style="width:95%;margin-left:2.5%;">
      <div style="height:25px;">
        <input type="text" placeholder="First Name" class="registerFields" id="user_fName" autocomplete="given-name" ng-model="regObj.user_fName" ng-blur="setInfo('user_fName')" />
        <input type="text" placeholder="Last Name" class="registerFields" id="user_lName" autocomplete="family-name" ng-model="regObj.user_lName" ng-blur="setInfo('user_lName')" />
      </div>
      <div style="height:25px;margin-top:10px;"><input type="email" placeholder="Email"  class="registerFields" id="user_email" autocomplete="email" ng-model="regObj.user_email" ng-blur="setInfo('user_email')" /></div>
      <div style="height:25px;margin-top:10px;">
        <select class="registerFields" id="user_phoneCountry" ng-change="selectPhone();" autocomplete="country" ng-model="regObj.user_phoneCountry">
            <option ng-value="" ng-if="false"></option>            
            <option ng-selected="pKey==regObj.user_phoneCountry" ng-repeat="pKey in notSorted(countries)" ng-value="pKey">{{pKey}}</option>
        </select>
        <input type="number" placeholder="Mobile Number" class="registerFields" inputmode="numeric" pattern="[0-9]*" id="user_phone" autocomplete="tel-national" ng-model="regObj.user_phone" ng-keypress="monitorLength($event,'user_phone',phoneNumLengths,1)" ng-blur="verifyLength('user_phone',phoneNumLengths,regObj.countryCode+' phone number')" />
      </div>

      <div style="height:25px;margin-top:10px;">
          <select class="registerFields" id="user_zipCountry" autocomplete="country" ng-change="selectCountry();" ng-model="regObj.user_zipCountry">
              <option value="" ng-if="false"></option>
              <option ng-selected="cKey==regObj.user_zipCountry" ng-repeat="cKey in notSorted(countries)" value="{{cKey}}">{{cKey}}</option>
          </select>
          <input type="text" ng-if="regObj.postalInput=='text'" placeholder="Home PostalCode" style="width:70%;float:right;" autocomplete="postal-code" class="registerFields" pattern="[a-zA-Z0-9 -]*" id="user_RegZip" ng-model="regObj.user_RegZip" ng-keypress="monitorLength($event,'user_RegZip',postalCodeLengths,2)" ng-blur="verifyLength('user_RegZip',postalCodeLengths,regObj.countryCode+' postal code')" />
          <input type="tel" ng-if="regObj.postalInput=='tel'" placeholder="Home Postal Code"  autocomplete="postal-code" class="registerFields" inputmode="numeric" pattern="[0-9 -]*" id="user_RegZip" ng-model="regObj.user_RegZip" ng-keypress="monitorLength($event,'user_RegZip',postalCodeLengths,2)" ng-blur="verifyLength('user_RegZip',postalCodeLengths,regObj.countryCode+' postal code')" />
      </div>
    </div>

【问题讨论】：

标签： android ios cordova ionic-framework autocomplete

【解决方案1】：

尝试将名称属性附加到每个字段。

附加名称属性后，键盘开始给出自动完成字段的建议

<input type="email" autocomplete="email" name="email"/>
<input type="tel" autocomplete="mobile" name="phone" pattern="[0-9]*"/>

【讨论】：