Hide the soft keyboard when tapping outside of textfields

Fixes #6
NativeScript · Sep 21, 2015 · c51b41a · c51b41a
1 parent a00155b
commit c51b41a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/app/views/login/login.js b/app/views/login/login.js
@@ -1,5 +1,7 @@
 var dialogsModule = require("ui/dialogs");
 var frameModule = require("ui/frame");
+var gesturesModule = require("ui/gestures");
+var viewModule = require("ui/core/view");
 var UserViewModel = require("../../shared/view-models/user-view-model");
 
 var user = new UserViewModel({
@@ -19,6 +21,14 @@ exports.loaded = function(args) {
 		navigationBar.tintColor = UIColor.whiteColor();
 	}
 
+	// Dismiss the keyboard when the user taps outside of the two textfields
+	var email = viewModule.getViewById(page, "email_address");
+	var password = viewModule.getViewById(page, "password");
+	page.observe(gesturesModule.GestureTypes.tap, function() {
+		email.dismissSoftInput();
+		password.dismissSoftInput();
+	});
+
 	page.bindingContext = user;
 };
 

diff --git a/app/views/login/login.xml b/app/views/login/login.xml
@@ -6,7 +6,7 @@
 		<Image src="res://logo" stretch="none" horizontalAlignment="center" />
 
 		<TextField id="email_address" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
-		<TextField secure="true" text="{{ password }}" hint="Password" />
+		<TextField id="password" secure="true" text="{{ password }}" hint="Password" />
 
 		<Button text="Sign in" tap="signIn" />
 		<Button text="Sign up for Groceries" tap="register" cssClass="link" />

diff --git a/app/views/password/password.js b/app/views/password/password.js
@@ -1,11 +1,19 @@
 var dialogsModule = require("ui/dialogs");
+var gesturesModule = require("ui/gestures");
+var viewModule = require("ui/core/view");
 
 var UserViewModel = require("../../shared/view-models/user-view-model");
 var user = new UserViewModel();
 
 exports.loaded = function(args) {
 	var page = args.object;
 	page.bindingContext = user;
+
+	// Dismiss the keyboard when the user taps outside textfield
+	var email = viewModule.getViewById(page, "email");
+	page.observe(gesturesModule.GestureTypes.tap, function() {
+		email.dismissSoftInput();
+	});
 };
 
 exports.reset = function() {

diff --git a/app/views/register/register.js b/app/views/register/register.js
@@ -1,12 +1,22 @@
 var dialogsModule = require("ui/dialogs");
 var frameModule = require("ui/frame");
+var gesturesModule = require("ui/gestures");
+var viewModule = require("ui/core/view");
 
 var UserViewModel = require("../../shared/view-models/user-view-model");
 var user = new UserViewModel();
 
 exports.loaded = function(args) {
 	var page = args.object;
 	page.bindingContext = user;
+
+	// Dismiss the keyboard when the user taps outside of the two textfields
+	var email = viewModule.getViewById(page, "email");
+	var password = viewModule.getViewById(page, "password");
+	page.observe(gesturesModule.GestureTypes.tap, function() {
+		email.dismissSoftInput();
+		password.dismissSoftInput();
+	});
 };
 
 function completeRegistration() {

diff --git a/app/views/register/register.xml b/app/views/register/register.xml
@@ -6,7 +6,7 @@
 		<Image src="res://logo" stretch="none" horizontalAlignment="center" />
 
 		<TextField text="{{ email }}" id="email" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
-		<TextField text="{{ password }}" secure="true" hint="Password" />
+		<TextField text="{{ password }}" id="password" secure="true" hint="Password" />
 
 		<Button text="Sign Up" tap="register" />
 	</StackLayout>