Code, Angular, iOS and more by Aviv Ben-Yosef

Stop Using Key Up Events When You Don't Need To

| Comments

A common task for web developers is capturing the case where the user presses the enter/return key on his keyboard when filling out a form, instead of clicking the “submit” button.

I’ve seen many, many developers reach for the key press events and check whether enter was pressed (oh, char code 13, how I hate you). That of course works, but is nasty. Here’s is an example using Angular.js (which I’m sure you can translate easily to your favorite way of doing this, such as jQuery’s .keyup()):

<div class="sign-up-section">
    <input type="email" ng-model="email" ng-keyup="signUpIfEnterPressed($event)">
    <button ng-click="signUp()">Sign up</button>
function signUpIfEnterPressed(event) {
    if (event.keyCode == 13) {
        return false;
    return true;

And of course, as you can see, signUpIfEnterPressed() is a function that has to check the event’s keyCode and compare it to the value of enter (13) and then, and only then, call the signUp() function. Bleh. Not good enough!

Turns out the people who wrote browsers already did most of the work related for us, we just have to reach out and use their work.

The trick is basically that the <form> element already is listening for these enter presses on all the inputs inside it. Pressing enter in an input in a form triggers the form’s submit event to be fired.

That means that we can now cleanly remove signUpIfEnterPressed() and replace the code with:

<form class="sign-up-section" ng-submit="signUp()">
    <input type="email" ng-model="email">
    <button type="submit">Sign up</button>

And of course the solution is pretty much the same regardless of what JS libraries you’re using (e.g. in jQuery you can do $('.sign-up-section').submit(signUp)), since this is purely done by the browsers.

Happy coding!

“Maintaining AngularJS feels like Cobol 🤷…”

You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?

It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.

Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.

Get the modernization email course!