Develop Reference

Adding autocomplete to input fields on Cordova Android and iOS app

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>

Try to attach name attribute to each and every field.
After attaching name attribute the keyboard started to give suggestion to autocomplete the field
<input type="email" autocomplete="email" name="email"/>
<input type="tel" autocomplete="mobile" name="phone" pattern="[0-9]*"/>

laravel 5.4 chrome for android not showing validation errors

I have a website working perfectly on desktop, however, google chrome is not showing validation error messages or flash info.
I tried other navigators like html source code viewer: worked perfectly
on chrome for desktop, everything is ok
when I serve my project from my computer and access it throgh wifi, it works perfectly
My server is running nginx on linux debian
The problem is, this only happens on my signin/signup page, other pages are showing errors and flash messages perfectly even on chrome for android
here is my view:
<h3>Welcome back</h3>
<div class="row">
<div class="col-lg-6">
<form class="form-vertical" role="form" method="post" action="{{ route('auth.signin') }}">
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="control-label" id="email">Email</label>
<input type="text" name="email" class="form-control" id="email">
#if ($errors->has('email'))
<span class="help-block">{{ $errors->first('email') }}</span>
#endif
</div>
<div class="form-group{{ $errors->has('password') ? ' has- error' : '' }}">
<label for="password" class="control- label">Password</label>
<input type="password" name="password" class="form- control" id="password">
#if ($errors->has('password'))
<span class="help-block">{{ $errors- >first('password') }}</span>
#endif
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Sign in</button>
<a style="padding-left: 10px;" href="{{ route('auth.forgot') }}">Frogot your password?</a>
</div>
<input type="hidden" name="_token" value="{{ Session::token() }}">
</form>
</div>
</div>
<script>
(please don't mind the spaces in the code, I don't have these in my page)
inside my controller, I have this:
$this->validate($request, [
'email' => 'required',
'password' => 'required',
]);
and I show flash messages this way:
return redirect()->back()->with('info', 'Incorrect sign in information.');
can you please help me out? this is really weird and frustrating
thank you

Haser!
I have the same problem on the test server, but the production is ok.
Having studied all the circumstances, I am inclined to believe that in my case the problem lies in the absence of https on the test server.
My logic is this: mobile chrome sees the password entry field and sees that there is no certificate. These two circumstances come to non-standard behavior. Indirectly, I managed to confirm my theory by studying the password change page, there is the same situation with the absence of errors.
This behavior is observed only in mobile chrome on android!

bootstrap 3.0 on android phonegap

is there any known issue of bootstrap 3.0 (the latest one) on android phonegap. I am able to see the buttons nicely on firefox (and on same resolution as on phone) but when the binary is installed on the phone the buttons do not render....
is this a known issue ?
Following is my simple template:
<div id="mcontent">
<div id="swrapper">
<div id="islider">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">Mrs</a>
<a class="btn btn-default" href="#">Ms.</a>
<a class="btn btn-default" href="#">Mr.</a>
</div>
<form>
<input type="text" name="firstname" placeholder="Firstname">
<input type="text" name="lastname" placeholder="Last Name">
<p><input type="text" name="email" placeholder="Email"></p>
<p>Must be at least 8 characters long</p>
<input type="password" placeholder="Password">
<input type="password" placeholder="Password repeat">
<p><button type="submit" class="btn btn-primary btn-large btn- block">Submit</button></p>
<p><span id="dclaimer">By registering you confirm that you accept our Terms of Use and Privacy Policy</span></p>
</form>
</div>
</div>
</div>

I know this is an old post but I have had the same issue. I believe this is down to jquery mobile. As when i removed it, it worked
Removing just the css of jquery mobile seems to keep jquery mobile functionality and allow bs to work

Switch off android word suggestions for web input type=text

I have a .html file with an input control of type=text which is for the user to make random input that do not make up a dictionary word. It is not inside a form. It is not a password field.
<input id="myblah" type="text" placeholder="hello" name="s" size="20"
maxlength="36" autocorrect="off" autocapitalize="off" autocomplete="off"
spellcheck="false"/>
On an Android phone, when I browse to the .html file and type in text into this input control the keyboard software makes suggestions and sometimes "corrects" the input to a word. This is behaviour that I would like to switch off - from what I've read, the above attributes should switch it off, so I'm at a bit of a loss.
(Latest version of android on a Samsung Galaxy S3, using the dolphin browser and swiftkey-x keyboard)

There is no such thing as autocapitalize(from what I know of html), but you might be able to try this. <input id="myblah" type="text" placeholder="hello" name="s" size="20"
maxlength="36" spellcheck="false" autocomplete="off" />
I am not too sure whether or not this will work on android for I do not have an Android Smartphone but this works on my browser.

For input controls:
<input type="text" name="username" id="username"
class="form-control" placeholder="Enter your user name"
value=""
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off" />
For a textarea control:
<textarea type="text" name="control_codes" id="control_codes"
class="form-control" placeholder="Enter device control codes"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off">
</textarea>

Turning off auto-complete for textarea and inputfields in Android Cordova-app

I'm working on an Android app (2.3.3) using Cordova (1.9.0), html5, javascript.
It's a language training tool so when users type their answers in textareas or inputfields, I don't want them to see suggestions.
I've tried autocomplete="off" in the textarea and input tag as well as in the form tag, but neither work. Does anyone know how to turn these suggestions off?
my test-html looks like this:
<div><b>With form:</b>
<form autocomplete="off">
<p>Wie <input size="5" value="b" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false"> jij?</p>
<textarea spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"></textarea>
</form>
</div>
<div><b>No form:</b>
<p>Jan, ik <input size="5" value="b" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false"> Jan.</p>
<textarea spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"></textarea>
</div>
Update:
I created a html-testpage and browsed there using an Android-phone, still experiencing the same autocompletion/suggestion-issue. So perhaps this is not a Cordova-app issue, but an Android browser issue?
Take a look (on an Android phone) http://jsfiddle.net/f3AJq/

try android:inputType="textNoSuggestions" in you EditText

I Just discovered it!, it's so easy!, just put into the input: name="password"
Just it!

Up until at least Android 4.4 in cordova apps, the html5 attribute autocomplete="off" as described above does not have any effect.
However on Android 6 the autocomplete="off" does work!
So it depends on the Android version, not the html.
(This is a cordova 5.1.1 android platform, in case anyone is wondering)