The curious case of link based default buttons

While working on a site today that was built to support multiple languages, I ran into a small issue. Since the site’s buttons were all actually text links (hrefs) made to look like good ol’ regular buttons (easier to do this rather than creating multiple button sets for each language), the default button action code I had working for other sites didn’t work for this particular site.

In the other sites with regular buttons, the enter key triggered the keypress function that submitted the action associated with the button.

Now, this might be something most of us didn’t expect or perhaps it just never occured to us, but triggering a click event programatically on a link will trigger the “onclick” event, but not the default action(href). Somehow, I never had to deal with this before, and it was curiously perplexing.

To combat this issue, I did some workaround coding. This example uses jQuery. This worked beautifully in the few browsers I tested.

$('.keypress').keypress(function(event){
   var keypress = $(this);
   if (event.which == 13) {
      if ($(event.target).attr('nodeName').toLowerCase() == "input") {
         var submit = $('.submit', keypress);
         if($(submit).attr('nodeName').toLowerCase() == 'a'){
            window.location = $(submit).attr('href');
            return false;
         }
         else{
            $('.submit', keypress).trigger('click');
         }
      }
   }
})

All was well with the world once I figured this out. It’s times like this when I learn something new about the most basic things that I feel all is right with the world.