demo.html

---
layout: example
title: Demo
---
<style scoped="scoped">
	input, textarea, select, button
	{
		display: block;
	}

	input, textarea, select
	{
		min-width: 20em;
	}

	input[type=radio], input[type=checkbox]
	{
		min-width: 2em;
	}

	input[type=radio], input[type=checkbox]
	{
		display: inline;
	}

	kbd
	{
		border-width: 2px;
		border-style: outset;
		padding: 1px;
		background-color: #eee;
	}

	.border
	{
		padding: 0.3em;
		border: 1px dotted #999;
	}
</style>
<p>
	Instead of using <kbd>tab</kbd> to navigate through elements on this page, try using
	<kbd>+</kbd> on the <em>keypad</em>. Also try reverse navigation with <kbd>shift</kbd>-<kbd>+</kbd>.
</p>
<p>
	In this demo, most of the elements are <em>plussable</em>, but the normal use case
	is to enable <em>plussing</em> where users input mostly numbers (as in quantities,
	zip codes, short date formats) using the keypad. The normal <kbd>tab</kbd> key still
	works as usual.
</p>
<p>
	Laptops may not have physical keypads, but instead it is emulated with the <kbd>Fn</kbd>
	key (or similar). PlusAsTab is not targeted at laptop users. It is possible to use
	an external/separate USB keypad though. Perhaps laptop users would be more interested in the
	<a href="enter-as-tab.html">PlusAsTab demo that uses enter as tab</a>? The key is configurable,
	and multiple keys are supported - read more on the project page.
</p>
<form>
<!-- Can be applied to elements one by one -->
<input type="text" autofocus="true" value="Try numpad plus from here" data-plus-as-tab="true" />
<textarea data-plus-as-tab="true"></textarea>
<a href="http://joelpurra.se/" data-plus-as-tab="true">Joel Purra</a>
<input type="submit" value="This button is not plussable, only tabbable" />
<!-- Can be applied to all fields within a container -->
<ol data-plus-as-tab="true">
	<li>
		<input type="checkbox" />
		Checkbox, plussable</li>
	<li>
		<input type="checkbox" />
		Another textbox, plussable</li>
	<li>
		<!-- Can be explicitly exluded from plussing -->
		<input type="checkbox" data-plus-as-tab="false" />Checkbox, plussing not enabled</li>
</ol>
<select data-plus-as-tab="true">
	<option>Drop down, plussing enabled</option>
	<option>Another option</option>
</select>
<a>Anchors without <code>href</code> are always skipped by the browser</a>
<!-- Can be applied using a class name -->
<input type="text" value="Try shift-plus from here" class="plus-as-tab" />
<select>
	<option>Drop down, plussing not enabled</option>
	<option>Another option</option>
</select>
<div data-plus-as-tab="true" class="border">
	<button type="submit">
		Plussing inside plussing enabled container</button>
	<div data-plus-as-tab="false" class="border">
		<button type="submit">
			Plussing not enable inside subcontainer to plussing enabled container</button>
	</div>
	<button type="submit">
		Plussing inside plussing enabled container</button>
</div>
<select data-plus-as-tab="true" multiple="multiple">
	<option>First </option>
	<option>Second</option>
	<option>Third</option>
</select>
<button id="click-to-add-checkbox" type="button" data-plus-as-tab="true">
	Click to add plussable checkbox after button</button>
<input type="number" min="-1000" step="100" max="1000" value="500" data-plus-as-tab="true" />
<p>
	Tabbing past here will usually put you in the address bar of the browser, but plussing
	will put you at the top of the page. Plussing is not overriding default behavior,
	it is extending it. Also, javascript cannot control focus of the browser address
	bar.
</p>
</form>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.rawgit.com/joelpurra/emulatetab/master/src/emulatetab.joelpurra.js"></script>
<script src="../dist/plusastab.joelpurra.js"></script>
<script>
//<![CDATA[

	$("form")
			.submit(simulateSubmitting);

	$("#click-to-add-checkbox")
			.click(addCheckboxAfter);

	function addCheckboxAfter(event)
	{
		var $target = $(event.target);

		// Explicitly enabling plussing on new checkbox
		var $checkbox = $('<input />')
								.attr("type", "checkbox")
								.plusAsTab();

		$checkbox.insertAfter($target);

		$target.focus();
	}

	function simulateSubmitting(event)
	{
		event.preventDefault();

		if (confirm("Simulating that the form has been submitted.\n\nWould you like to reload the page?"))
		{
			location.reload();
		}

		return false;
	}
//]]>
</script>