[html5] Locking the Screen

[Micky Hulse]

On Tue, Dec 24, 2013 at 4:28 PM, Doug Hardie <bc979 at lafn.org> wrote:
> I have a customer who just will not wait for a page to load.  He is clicking on a button before all of the field data has been displayed, specifically the hidden fields.  As a result the server gets a GET request with some of the fields missing.  I have been trying to find a way to "lock" the screen once a button has been pressed and not allow the browser to process any clicks until the page is completely loaded.  Is there a way to make that happen?

Off the top of my head, maybe you could set form fields to disabled by
default, and use JS to enable them once the page has loaded?

Disabling an input field:

<input type="text" name="fm_text-2" placeholder="… text
…" disabled>

There could be accessibility issues doing something like above, but
I've done similar things after form submission (i.e., disabling form
fields, like submit, using JS, to avoid double submissions).

Maybe better: Hide the form with JS/CSS on page load? To keep things
accessible, you could use a technique like:

http://www.paulirish.com/2009/avoiding-the-fouc-v3/

... then you could do:

.js form { display: none; }

... and use JS to show when you're ready (like, after page load).

If JS fails to load, then the form is still accessible.

Tricks like that are usually the route I head.

Not sure about an HTML5-specific solution, sorry.

-- 
<git.io/micky>