I have looked extensively on ways to fix this issue and I have tried many suggestions, but have yet to solve the problem. I have an Ionic 1 (1.7.16) app, which has a login page that has input fields. When the user taps on the input field the content on the page gets pushed out of view. Then when the keyboard is closed, the content aligns it self correctly.
I have installed the ionic keyboard and implemented cordova.plugins.keyboard.disablescroll(true) and this does not work.
Here is an example of my function that runs when ionic is ready
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.keyboard.disablescroll(true)
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
Here is the login page:
<ion-view view-title="Login" align-title="left">
<ion-content class="loginBackground">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
<h1>TEST</h1>
</div>
</div>
<div class="padding">
<button class="button button-block icon-left ion-social-facebook button-positive" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="login()">Login</button>
</div>
<!--Register Now button-->
<div class="register">
<button class="button button-block button-clear hide-on-keyboard-open" ng-click="register()">Not signed up? Register now!</button>
</div>
<!--END Register Now button-->
</ion-content>
Any ideas?
Related
I have created a login form using angular reactive form. I've facing some strange behavior
If I submit the form using the submit button, I get the latest values which I've entered. If I submit the form using Enter key, then the value received is not latest. I've added the code below, can anyone pls suggest what i'm doing wrong.
ngOnInit() {
this.loginForm = this.formBuilder.group(
{
username: new FormControl(),
password: new FormControl(),
RememberMe: []
},
{
updateOn: 'blur'
}
);
}
login() {
const formvalue = this.loginForm.value;
console.log(formvalue);
return;
}
<div class="limiter">
<div class="container-login100 img-bg">
<div class="wrap-login100">
<img class="logo-center" src="../../../../assets/images/logo-big.png" />
<form [formGroup]="loginForm">
<div class="ui segment">
<h2>Login Form</h2>
<div class="ui form" >
<div class="required inline field">
<label>Username</label>
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="Username" placeholder="username" formControlName="username" >
</div>
</div>
<div class="required inline field">
<label>Password</label>
<div class="ui left icon input">
<i class="lock icon"></i>
<input [type]= "'password'" placeholder="password" formControlName="password" >
</div>
</div>
<div class="field login-ckeck">
<sui-checkbox>
Remember me
</sui-checkbox>
</div>
<button [ngClass]= "'ui primary button'" (click)= "login()">Submit</button> Forgot your password?
</div>
</div>
</form>
</div>
<!-- <footer class="footer">footer</footer> -->
</div>
</div>
Found the solution, it was an error from my side.
I had to change the updateOn to submit, for my code to work
this.loginForm = this.formBuilder.group(
{
username: new FormControl(),
password: new FormControl(),
RememberMe: []
},
{
updateOn: 'submit'
}
);
You can listen to either the forms (ngSubmit) or directly to the (keyup.enter) event and trigger the event then.
<form (ngSubmit)="login()">
<form (keyup.enter)="login()">
I have a phonegap application using Angular. The problem I'm having is that I want to allow user to enter their email in a form inside a modal.
$scope.email = function () {
$uibModal.open({
animation: true,
templateUrl: 'views/modals/sales/email.html',
size: "md",
windowClass: 'center-modal',
controller: function ($scope, $uibModalInstance) {
//$("#email").focus();
$scope.submit = function () {
};
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
}
}
});
};
Now the template for that modal is this.
<div class="panel panel-primary">
<form name="form" ng-submit="submit(form)" novalidate>
<div class="panel-body">
<div class="col-md-12">
<h3 class="text-center">Please enter your email</h3>
</div>
<div class="form-group col-md-12">
<input type="email" class="form-control btn-block input-lg" ng-model="customer.email" id="email" autofocus>
</div>
<div class="col-md-3 col-md-offset-6">
<button class="btn btn-default btn-block btn-lg" type="button" ng-click="close()">Close</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-block btn-lg" type="submit" ng-click="submit()">Send</button>
</div>
</div>
</form>
</div>
The problem that as you can see the input type email need to be focus when the modals open up, but instead my input is getting focus but the virtual keyboard on iOS is not showing up until I manually tap on the input.
How can I show up the virtual keyboard when the modal opens up.
thanks.
install the below cordova plugin
https://github.com/driftyco/ionic-plugin-keyboard
call cordova.plugins.Keyboard.show()
I am trying to create a Login/Register dialog using Angular Material. The dialog should switch between a login page and a register page when you click the 'Switch' button.
Here is the dialog html
<md-dialog>
<md-dialog-content>
<div ng-if="lc.show_form == 'login'">
<form name="loginForm" ng-submit="loginForm.$valid && lc.login()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.login()" class="md-raised md-primary">Login</md-button>
<md-button ng-click="lc.showRegister()">Switch</md-button>
</form>
</div>
<div ng-if="lc.show_form == 'register'">
<form name="registerForm" ng-submit="registerForm.$valid && lc.register()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password Confirm</label>
<input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm">
<div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.register()" class="md-raised md-primary">Register</md-button>
<md-button ng-click="lc.showLogin()">Switch</md-button>
</form>
</div>
</md-dialog-content>
</md-dialog>
here is the controller code
angular.module('dialogDemo', ['ngMaterial'])
.controller('AppCtrl', function($mdDialog, $log) {
$mdDialog.show({
controller: 'dialogCtrl',
controllerAs: 'lc',
templateUrl: 'loginDialog.tmpl.html'
});
})
.controller('dialogCtrl', function($scope, $log) {
var self = this;
self.show_form = 'login';
self.showRegister = function() {
self.show_form = 'register';
console.log('show register');
};
self.showLogin = function() {
self.show_form = 'login';
console.log('show login');
};
});
Here is a plunker of what I am trying to accomplish.
http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview
Click the switch button. You will notice that the content changes, but if you click the switch button a second time the dialog only resizes, If you click it a third time it switches back. I am trying to figure out why it won't switch between the two views with only one click of the button.
Your plunker is working well for me.
I press login and i get the login modal, then i press register and the modal turns into register modal. If i press login again i get login modal.
pd: I am using chrome.
This question already has an answer here:
How to handle them jump out(while keyboard open) in query mobile?
(1 answer)
Closed 9 years ago.
I am using jqm .Actually I open the pop up screen on button click .I am facing a problem my them goes up while entering the text.Here is my code..
http://jsfiddle.net/ravi1989/7JqRG/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- **************Case Information Pop up Start*******************-->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
</div>
<div data-role="fieldcontain">
<label for="caseDate" style="text-align:left;margin-left: 0px;" >Case Date:</label>
<input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h" >
<!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Case Notes :</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
</div>
</div>
</div>
Please + button on header .Pop up open fill the text black them goes up?
Here is your answer..
window.resize due to virtual keyboard causes issues with jquery mobile
1) Go into jquery.mobile-1.x.x.js
2) Find $.mobile = $.extend() and add the following attributes:
last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:
getScreenHeight: function() {
// Native innerHeight returns more accurate value for this across platforms,
// jQuery version is here as a normalized fallback for platforms like Symbian
if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
{
this.last_height = window.innerHeight || $( window ).height();
this.last_width = $(window).width();
}
return this.last_height;
}
I have a single .html file that looks similar to the following:
<div id="myPage" data-role="page">
<div data-role="header">
Back
<h1>My App</h1>
</div>
<div>
<input id="saveButton" type="button" value="Save" onclick="doStuff()" />
</div>
<script type="text/javascript">
function doStuff() {
var updatedText = getUpdatedText();
$("#myMessage", "#myDialog").html(updatedText);
$.mobile.changePage("#myDialog", { role: "dialog" });
}
</script>
</div>
<div id="myDialog" data-role="page">
<div id="myMessage"></div>
<input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" />
<input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" />
</div>
When "doStuff()" is called, I want to set a custom message in the text of my dialog and open the dialog. For some reason, I have been unable to open the myDialog. For the life of me, I cannot figure out what I'm doing wrong. I have reviewed the content posted here: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html
I think you need to set the role of the page to dialog
<div id="myDialog" data-role="dialog">
<div id="myMessage"></div>
<input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" />
<input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" />
</div>
And then open the dialog with
$.mobile.changePage("#myDialog");
See Fiddle http://jsfiddle.net/kYsVp/2/