Expectations If The User Presses Enter

This post is really more of a quick tip than anything else, but if you’re in the business of building web sites or web applications in which users interact with the project and are used to using shortcuts throughout the rest of their applications, then you need to consider the case of what to do if the user presses enter.

If The User Presses Enter

That is, if the end user is using the project you’re working on in order to, say, submit information to the server via a form, then they shouldn’t necessarily have to manually use the mouse (or trackpad) to click on the ‘Submit’ button in order for their information to be transmitted across the wire.

If you’re an experienced web developer, then you’re likely familiar with using JavaScript to handle situations like this, but if you’re new to the business or just new to working with JavaScript then here’s the basics for handling this use case.

If The User Presses Enter…

Generally speaking, people like to use shortcuts in order to be more productive when using their applications (whether or not they are desktop applications or web applications).

But websites don’t necessarily provide a consistent experience across the board such that sometimes a website might handle the case then the user hits enter, and another site might not.

That’s a bummer, but there’s something we can do about this in our project: In short, we introduce support for the enter key such that it will do the same thing if the user were to hit the Submit button (or whatever button triggers an action) when working with our code.

In short, we need to attach an event handler to the page such that when the user hits enter, it triggers the same functionality – it meets their expectations.

Here’s how to do this using jQuery (this is chosen not because I’m using jQuery as a crutch, but because that’s what ships with WordPress and since my work primarily involves WordPress):

In short, the code attaches a handler to the document object provided by the web browser. If it detects that enter has been pressed (which is denoted by the 13 key code – or, in our case, the which property of the event object), then it will fire the code that’s contained within the conditional.

Be sure to take note of the code comment as it’s important if you want to write maintainable code. To reiterate:

Define your functionality here. Note that if you have code that’s being duplicated for, say, a ‘click’ handler, then abstract the code into a function and just make a call to the function.

If you’re working with a normal form, most modern web browsers will likely submit the form by default if the user hits enter but we’re not always wanting to do that. Sometimes, we may want to initiate an asynchronous request, toggle something else on the interface, and so on.

To that end, this means that if you’re going to be doing something like submitting an Ajax request or toggling the visibility of an element when the user clicks a button or hits enter, that code should be defined in a function so that the function can be called in multiple places.

Note that there may be other factors that you need to consider other than the 13 key code; however, this should be a good starting place for anyone looking to handle the case if a user presses enter.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.