Managing keyboard with forms

Ionic Framework ionic-v3
#1

Hi,

I managed to get a nice log in form with the following code:

 <form #loginForm="ngForm" novalidate id="loginForm" padding>
			<ion-list no-lines>
				<ion-item class="inputField">
					<ion-label stacked>Email</ion-label>
					<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off">
					</ion-input>
				</ion-item>
				<ion-item class="inputField">
					<ion-label stacked>Password</ion-label>
					<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel">
					</ion-input>
				</ion-item>
			</ion-list>
			<ion-row responsive-sm>
				<ion-col>
					<button ion-button (click)="onLogin(loginForm)" type="submit" block class="loginButton">LOG IN</button>
				</ion-col>
			</ion-row>
		</form>

It looks quite nice and the onLogin function is well implemented.
Unfortunately, I had bad user experience with this form.
For each field, the keyboard shows the ‘Submit’ button.
Typically, when I first enter username, if I enter ‘Submit’ button, the form is submitted without the password field.

Is there a way to show a keyboard without the ‘Submit’ button so the keyboard will just dismiss if user hits the ‘Enter button’ without needing to click anywhere else in the screen? In this case, the form will be submitted only if user hits the ‘LOG IN’ button in the form.

1 Like
#2

I think it’s not possible to show the keyboard without the submit option if you focus within a form.

One solution is remove the form tags and handle the logic in the onLogin function as you do now.

Another “solution” is preventDefault the submit event with onLogin($event, loginForm) and then in your onLogin function e.preventDefault() and check if username or password are “dirty” (have been touched). If not, then do nothing in your onLogin function and set focus on input password.

Hope it helps

#3

Hi Adonai,

Thank you for your reply.
As suggested, I removed the form tags and handled the logic in the onLogin function.

Works like a charm!

I also tried the second solution. It also worked.

My guess: I will use the first solution every time I do not want the ‘Submit’ button to appear.
In all the other cases, the second solution will be perfect!

1 Like