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

z4bn682m  于 2022-11-15  发布在  Android
关注(0)|答案(1)|浏览(106)

我在Android和iOS上都有一个Ionic/Cordova应用程序,它有一个注册表单。为了简化注册表单,我试图在每个输入字段中添加autocomplete='auto-fill-field',但到目前为止我还没能让它们工作。
我的应用程序正在使用 cordova 提供的所有最新网页视图。
有没有可能让标准的web输入自动完成功能在一个捆绑的cordova应用程序上工作?如果有,怎么做?我的直觉是,它不会工作,因为web视图没有访问标准的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>
vltsax25

vltsax251#

尝试将name属性附加到每个字段。
附加名称属性后,键盘开始给予自动完成字段的建议

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

相关问题