Tap Only Once

Occasionally it is important to allow only one tap on a web page element. A form submit button, for example, which this article describes how to do.

To prevent a second tap on something, what was tapped needs to disappear. It might just go poof, or it might get covered. This article describes how to make it go poof.

Here is an illustration. When you tap the button below, it disappears.

Reload the page to make the button appear again.

This is the source code of the above illustration.

<input 
   style="visibility:visible" 
   onclick="this.style.visibility='hidden'" 
   type="button" 
   value="Tap Me and I Go Poof">

The page is loaded with the button CSS being visibility:visible. When the button is tapped, this.style.visibility='hidden' turns visibility into hidden.

The reason to use property visibility instead of display is so the button can be removed without reflowing the entire web page. The button goes poof, but the space it occupied does not close up.

Now you know. :-)

(This content first appeared in Possibilities newsletter.)

Will Bontrager