From 1af3c739f819607fceff97ed724d85e61d3cbd38 Mon Sep 17 00:00:00 2001 From: Henrik Ingo Date: Mon, 23 Oct 2017 23:14:48 +0300 Subject: [PATCH] Add form plugin Adds new form plugin, which blurs() focus on impress:stepleave. This is to prevent an input field from being focused when it is no longer visible. Related to supporting forms, in an earlier commit we already changed the navigation plugin to only listen to keypress events from body and html elements. This was to allow presentations to have, for example, form elements, where users can type text, including spaces, use arrows, etc. --- src/plugins/form/form.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/plugins/form/form.js diff --git a/src/plugins/form/form.js b/src/plugins/form/form.js new file mode 100644 index 0000000..57ea42f --- /dev/null +++ b/src/plugins/form/form.js @@ -0,0 +1,28 @@ +/** + * Form support + * + * Functionality to better support use of input, textarea, button... elements in a presentation. + * + * Currently this does only one single thing: On impress:stepleave, de-focus any potentially active + * element. This is to prevent the focus from being left in a form element that is no longer visible + * in the window, and user therefore typing garbage into the form. + * + * TODO: Currently it is not possible to use TAB to navigate between form elements. Impress.js, and + * in particular the navigation plugin, unfortunately must fully take control of the tab key, + * otherwise a user could cause the browser to scroll to a link or button that's not on the current + * step. However, it could be possible to allow tab navigation between form elements, as long as + * they are on the active step. This is a topic for further study. + * + * Copyright 2016 Henrik Ingo + * MIT License + */ +/* global document */ +( function( document ) { + "use strict"; + + document.addEventListener( "impress:stepleave", function() { + document.activeElement.blur(); + }, false ); + +} )( document ); +