Adding Enter and ESC default keys to SharePoint list forms

When creating or editing list items in SharePoint, have you ever wished that you could save the item by pressing Enter?

I have developed a small solution that enables users to save the list item by pressing Enter when the cursor is in a single-line text box. Pressing the ESC key closes the form without saving. The Enter and ESC keys work on the Create and Edit forms. The ESC key in addition also works on the Display form.

This solution is elegant in that it does not require you to modify any element in your SharePoint instance.

1. Download the solution

You can download the complete Visual Studio solution here.

Activate the site collection feature BNH.SharePoint.ListFormDefaultButtons after deploying the solution.

2. How does it work?

The approach is actually really simple. On loading of a page, a jQuery script is executed and check if the page is one of the list forms. The script then attaches JavaScript event handlers to the text boxes on the form to handle the keypress and keyup events. Within the handlers, if the key stroke was an Enter or ESC, then jQuery is used to retrieve the Save or Cancel button on the form and invoke their click event. The code is well commented so review the comment if you are interested.

What makes this solution elegant is how the script is delivered to the page. This is done by a CustomAction with the Location attribute set to ScriptLink as below:

<CustomAction Id="ListFormDefaultButtonsCustomActions.JQueryScript"
				  Location="ScriptLink"
				  ScriptSrc="BNH.SharePoint.ListFormDefaultButtons/jquery-1.7.2.min.js"
				  Sequence="100"/>

	<CustomAction Id="ListFormDefaultButtonsCustomActions.MainScript"
				  Location="ScriptLink"
				  ScriptSrc="BNH.SharePoint.ListFormDefaultButtons/listFormDefaultButtons.js"
				  Sequence="101"/>

The two CustomActions above cause the two script files to be included in the <head> section of all pages where the feature is activated. This means you can add JavaScript execution on load to any page without modifying any masterpage or page layout. It also means they can be removed simply by deactivating the feature.

3. Things to note

  • List form file names: the code determines whether the current page is a list form by looking for the OOTB form file names, i.e. DispForm.aspx, NewForm.aspx, and EditForm.aspx. The solution as provided will not work if your list forms use other file names.
  • OOTB ESC key behaviour in IE: OOTB and in IE, pressing the ESC key while the cursor is in a single-line text box will undo/reset changes to the text in the text box. Chrome does not have this behaviour. This solution will override this behaviour in IE.
  • OOTB keyboard short cuts: OOTB you can use Alt + O to trigger the Save button on the Create and Edit forms. I still like the Enter key better :). OOTB you can use Alt + C to trigger the Cancel button. However for some reason this does not work for me in Chrome. And again, I prefer the ESC key.

4. Check out my other solutions

Check out my other custom solutions that fill certain gaps in SharePoint here.

Advertisement

About Bernado

Based in Australia, I am a freelance SharePoint and Dynamics CRM developer. I love developing innovative solutions that address business and everyday problems. Feel free to contact me if you think I can help you with your SharePoint or CRM implementation.
This entry was posted in List Form, SharePoint 2010. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s