Musings and Solutions for SharePoint, O365, and Azure

2013 Javascript SharePoint Online

Enter key gone bad

March 18, 2016

Enter key gone bad

EditGoneWrongThis morning I had an issue trying to implement a Phone Directory on a client’s home page.  The UI incorporated a First Name and a Last Name input box and a “Go” button.  But as we all know, users like to hit Enter, and we all want to try and support the best user experiences we can.  However, SharePoint's default implementation of the Enter key can sometimes put the page in edit mode…

 

 

 

So how do you get around this… two things..

  1. You need to stop the event from propagating, not that this is really the culprit but if you’re doing widget type work it’s just good practice to make sure that what you’re doing doesn’t affect the functionality of the rest of the page.
  2. You need to ignore the SharePoint's default behavior of the enter key.

 

So what does this look like?

Let’s say you had the following DOM:

<div>
    <div>
        <input placeholder="First" onkeydown=" MYCODE.onEnter();" />
        <input placeholder="Last" onkeydown=" MYCODE.onEnter();" />
        <input style="cursor: pointer;" onclick=" MYCODE.go();" />
    </div>
</div>

And the following script:

<script type="text/javascript">
    "use strict"
    var MYCODE = MYCODE || {};
    MYCODE.go = function () {
        //Code to execute Phone Directory search goes here
    }
    MYCODE.onEnter = function onEnter() {
        //See options below
    }
</script>

There are a few ways to accomplish the same thing:

Option 1 (Old School):

Option 2 (Modern and Sexy):

Option 3: (Perfectionist)


    Julie has been building software on primarily the Microsoft platform for over 20 years. With a degree in Electrical Engineering specializing in microprocessor system design from Worcester Polytechnic Institute she came at software initially from a very low level but quickly realized a love and aptitude for developing rich user experiences and solutions. She worked her way up through internal IT ranks reaching a Director of IT position before realizing more impact could be made in consulting and really focused in on the SharePoint platform in 2007. Since then her focus has been on the SharePoint platform, Office 365, Azure, and client side development. She's the co-author of the Widget Wrangler JavaScript library and continues to try and help innovate SharePoint and Office 365 solutions for her clients. She is a 2017 recipient of the Microsoft MVP award for Office Servers and Services.


    Leave a comment

    Leave a Reply

    %d bloggers like this: