In the signin page of my ionic 2 app, I have the following:
<form [formGroup]="signinForm" (submit)="onSubmit($event)" style="padding-top: 20px;">
<div class="formItem">
<ion-input #username type="text" placeholder="Username" formControlName="username" autocapitalize="off"></ion-input>
</div>
</form>
This produces a weird 1-pixel-wide artifact.
Here is what it produces on the page:
<div class="formItem">
<ion-input formcontrolname="agencyNumber" placeholder="Agency ID" type="text" class="input input-md ng-untouched ng-pristine ng-valid" ng-reflect-name="agencyNumber" ng-reflect-placeholder="Agency ID" ng-reflect-type="text">
<input class="text-input ng-untouched ng-pristine ng-valid text-input-md" formcontrolname="agencyNumber" placeholder="Agency ID" autocomplete="off" autocorrect="off" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md" ng-reflect-model="test9994" ng-reflect-type="text" type="text" ng-reflect-placeholder="Agency ID">
<!--template bindings={
"ng-reflect-ng-if": "true"
}-->
<input aria-hidden="true" next-input="" ng-reflect-type="text" type="text">
<button class="text-input-clear-icon disable-hover button button-md button-clear button-clear-md" clear="" ion-button="" type="button" ng-reflect-hidden="true" hidden="">
<span class="button-inner"></span>
<div class="button-effect"></div>
</button><!--template bindings={
"ng-reflect-ng-if": "true"
}-->
<div class="input-cover" tappable=""></div>
</ion-input>
</div>
That weird little artifact appears to be the second input field:
<input aria-hidden="true" next-input="" ng-reflect-type="text" type="text">
What is this? Why is it appearing?
EDIT: I have updated to ionic 2.0.0 with latest supported dependencies, and the problem persists.
I believe thats from a validator from your FormBuilder. It is supposed to turn red and underline the field if you fill it out and happens to be invalid. You should be able to remove it by editing the ng-valid and ng-invalid classes and making
Related
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]*"/>
I have started work on Phonegap and it is very hard for Native App developer to go for Hybrid.
Just want to know that how I can show configuration screen only once in Phonegap. Below is the screenshot. I just want to show it only when user runs an app first time, and not again and again whenever user launches an app and saves IP address.
The problem here is that, whenever I press back button of device, this screen gets display.
Here is my HTML:
<body>
<div data-role="page" id="pageConfig"> // This Div needs to show only first time
<div class="ui-content" data-role="main">
<h3>Configurations</h3>
<label for="ipText">IP Address:</label>
<input type="url" id="ipText" name="ipText" />
Save
</div>
</div>
<div data-role="page" id="pgLgn">
<div data-role="main" class="ui-content">
<form id="form1" class="validate">
<div class="ui-field-contain">
<label for="usrNme">Username:</label>
<input type="text" name="usrNme" id="usrNme" placeholder="Username" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<label for="pswrd">Password:</label>
<input type="password" name="pswrd" id="pswrd" placeholder="Password" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<input type="checkbox" id="chbx-0" class="custom" data-inline="true" />
<label for="chbx-0">Remember me</label>
</div>
<input type="submit" data-inline="true" value="Login" id="btnLogin" data-shadow="false" data-theme="a" onclick="OnLoginClick()"/>
<input type="reset" data-inline="true" value="Reset" data-shadow="false" />
</form>
</div>
</div>
</body>
What Cordova Plugin I need?
NOTE: I am using Jquery Mobile and Cordova SQLite Plugin for data storage. And my app is Single Page Architecture.
Thanks in Advance!
Please let me know if not clear.
You have to write this line in device ready function.
document.addEventListener("backbutton",onBackKeyDown,false);
function onBackKeyDown(){
if($.mobile.activePage.attr("id") == "pgLgn"){
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
}
Use localStorage. Save a simple string with key and check whether there is a particular value against key or not in deviceready function.
I have a form in which one input element gets hidden under keyboard after focusing on it. I don't want my page to get resized.
Can this be handled using scroll, so that only the form div gets scrolled to that particular element?
Or any other approach to this?
I'm not using jquery-mobile and I have tried scrollToElement of iScroll 5, but to no use.
<body onload="initialize()">
<div id="header">
<img alt="" class="header_logo" src="" />
</div>
<div id="main">
<div id="map-canvas"><input id="pac-input" class="controls" type="text" placeholder="Search Area" /></div>
<form id="booking_form" action="#" >
<input type="tel" id="contact_no" placeholder="Contact Number*" maxlength="10"/>
<div class="group">
<span id="get_pick_location" class="gps_icon" title="Press to get current location address/ Select a point on map to get address"></span><textarea cols="10" id="pick_up_location" placeholder="Pickup Location*" ></textarea>
</div>
<div class="group">
<span id="get_drop_location" class="gps_icon" title="Press to get current location address/ Select a point on map to get address"></span><textarea cols="10" id="drop_off_location" placeholder="Drop off Location*" ></textarea>
</div>
<input type="text" id="pick_up_time" placeholder="Pickup time*" />
<input type="text" id="car_model" placeholder="Car*" />
<input type="submit" id="confirm_booking" class="custom_button" value="Confirm Booking" />
</form>
</div>
<div id="footer">
<button id="create_booking" class="custom_button">Book Now</button>
</div>
</body>
The input field car_model gets hidden under keyboard. I have android:windowSoftInputMode="adjustPan" in my manifest file.
theScroll = new IScroll('form');
$('#car_model').focus(function(){
theScroll.scrollTo($('#car_model'));
});
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
I'm working on phonegapp application. My application has a form which user should fill.I have used inline validation using Jquery. when user clicked some required field & didn't fill the field it will prompt the error or if he try to submit the form all the required fields will be given errors. It works as i want. My problem is when user clicked back-button without submitting the form, all the prompted errors are in the new page.How can i hide those prompted errors when user clicked back-button.
please help me.
I have attached screen shots to picasa-album. check it in here
https://picasaweb.google.com/103544813681982438507/PhonegapApp
Here goes my code..
<html>
<form id="formID" method="post" action="submit.action">
<ul data-role="listview" data-inset="true" data-theme="a">
<li ><div data-role="fieldcontain">
<label for="address">Address</label>
<input type="hidden" name="address" /></div>
<label for="street">Street:</label>
<input type="text" name="street" id="street" value="" class="validate[required] text-input" data-prompt-position="topLeft:50" data-prompt-position="top:60"/>
<label for="suburb">Suburb</label>
<input type="text" name="suburb" id="suburb" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="town">Town</label>
<input type="text" name="town" id="town" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="district">District</label>
<input type="text" name="district" id="district" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></li>
<li>
<div data-role="fieldcontain">
<label for="date">Date</label>
<input value="" class="validate[required] text-input datepicker" type="text" name="date" id="date" data-prompt-position="topLeft:50" /></div></li>
<li>
<div data-role="fieldcontain">
<label for="owner_name">xxxxxxxx</label>
<input type="text" name="xxxxx" id="xxxxx" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></div></li>
<li>
<div data-role="fieldcontain">
<label for="xxxxxx">xxxxxxxxxxxx</label>
<input type="text" name="xxxxxxxxxx" id="xxxxxxxxxxx" value=""/></div>
</li>
</ul>
<div data-role="fieldcontain">
<button type="submit" name="save" id="save" data-theme="a" value="Save" class="submit"/></div>
</form>
</div></div>
<script type="text/javascript">
//Form Validating.................................................
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine({autoHidePrompt:true});
$( ".datepicker" ).datepicker();
});
</script>
</html>
You can hide the form validation elements when a user navigates away from the current page:
$(document).on('pagehide', function () {
$('#formID').validationEngine('hideAll');
});
Source: https://github.com/posabsolute/jQuery-Validation-Engine
It doesn't look like you're quite following the jQuery Mobile page convention: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html
Quick Example:
<body>
<div data-role="page">
<div data-role="header>...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</body>
Note that .on() is new as of jQuery 1.7 so if you're using 1.6.4 or older, change .on() to .bind().