It sounds kind of obscure, but it could happen to you. While developing an application, you navigate to a page with a textbox and out of habit you press the enter key and your app navigates back to the previous page, losing your entered text.
Why, why would this happen? Who thought it was a good idea to add it to the template?
The good news is this is not intentional. The Metro UX Guidelines recommend, as you would expect, the Enter key is used to Start or activate, not to navigate back.
So what was going on with my app (and maybe yours)? I’ll explain the few steps that line up to cause this behavior and then explain the quick and easy fix.
1) Use the PageControlNavigator class from the Grid App project template
If you create a new Grid Application project in Visual Studio or Blend, you are provided a PageControlNavigator class which will happily manage Page fragments for you.
2) Add a textbox and a button to a secondary page
Continuing with the Grid application project example, open the groupDetail.html page and add the following lines to the main section.
<button onclick="console.log('button tapped');">Tap here</button>
3) Open the app, nav to the secondary page, select the textbox and hit enter
Run the Grid application project and click a group header (“Group Title: 1”), now select the textbox and hit enter. Instead of the “Tap here” button click event firing the app naviagates back.
Why didn’t the “Tap here” button fire? Why did it navigate back?
Here’s the issue:
- The default page template adds a “win-backbutton” button to the header of each page
- The HTML5 button tag is by default set to a type submit button
- Since we are running in a browser, hitting the enter key “clicks” the first submit button
- The navigator class handles the click event of “win-backbutton” and calls nav.back()
Here’s the solution:
The fix, which you probably figured out already, is to change the type of the back button
In the header of the secondary page, set the button type to “button”:
<button class="win-backbutton" type="button" disabled></button>
That’s it, problem solved! The Enter key can go back to starting and activating again and your users won’t unintentionally lose data and cry out in frustration.