"Create a map" / "Number of caches" / Enter key -> Map is not shown

Question

Hi everybody,

I am writing regarding following issue (http://project-gc.com/qa/?qa=3679/enter-key-is-not-recognized-when-i-press-it-to-create-a-map)

So the issue is, when I am (for example) in the "Top Favorite Caches" and I want to create a map with the first 30 caches list ("Create a map" and I enter manually 30) and hit Enter on my keyboard, and I get back to the "Top Favorite Caches" site, without a map!.

But it works when I click with my mouse on "Create map" instead of hitting Enter on my keyboard. 

I have this issue also in my webpage (which is programmed in Bootstrap, like this one I guess?). I have fixed it writing following code:

<form onKeypress="if(event.keyCode == 13) event.returnValue = false;">

This code ignores the "Enter" key, so you have to click on the "Create map" button with the mouse.

Maybe you can have a try with this code 

Thanks,

Best regards,

Daniel

Answer 1

I suspect the reason is that the 'create map' button isn't actually the default 'action' when the enter button is pressed. If you cycle between the text field/buttons using the 'tab' key, then press enter when the 'create map' button is highlighted, it works.

I agree it is odd that it basically reloads the page if you press Enter in the text box though.

Comments

It looks like the buttons are outside of the form tag within the modal and are not submit buttons for the form. This means that Enter triggers the default behaviour of the form, which (for a form without another URL given) is reloading the current page.

An alternative to just suppressing the Enter key would be to trigger a click event on the button.