Adding autocomplete to input fields on Cordova Android and iOS app

[ad_1]

I have an Ionic/Cordova app on both Android and iOS that has a signup form. In an effort to streamline the signup form I am trying to add autocomplete="auto-fill-field" to each of the input fields but so far I have not been able to get them to work.

My app is using all of the latest webviews supplied by Cordova.

Is it possible to get standard web input autocomplete fields to work on a bundled cordova app? If so, how? My hunch is that it won’t work because the webviews don’t have access to the standard chrome/safari browser. I see lots of posts about it but none of the ones I have reviewed have been able to get it to work for me.

This is my current signup form:

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

[ad_2]

Source link

Leave a Reply

Your email address will not be published.