spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
66 lines (63 loc) • 3.11 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Input Elements">
<meta name="author" content="Yeonjae Koo">
<meta name="description" content="There are many types of the input element, such as text, password, number, and date. We are trying to handle all types, but it's still in progress. In this page, you can check the <b>spatial navigation behavior for all input elements types</b> implemented so far.">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<div class="container" style="width:600px;">
<div><p class="label" style="vertical-align: top;">text area</p><textarea style="width: 300px; height: 80px;"></textarea> </div>
<div><p class="label" style="vertical-align: top;">text area</p><textarea style="width: 300px; height: 80px;">abadlgkja;dfrijapeija;kdfj;aldkga;kdhf;asdkjf;adkj</textarea> </div>
<div><p class="label">tel</p><input type="tel" value="tel"></div>
<div><p class="label">url</p><input type="url" value="url"></div>
<div><p class="label">hidden</p><input type="hidden" id="postId" name="postId" value="123456"></input></div>
<div><p class="label">date</p><input type="date"></div>
<div><p class="label">email</p><input type="email"></div>
<div><p class="label">image</p><input type="image" src="images/login_img.png"></div>
<div><p class="label">month</p><input type="month"></div>
<div><p class="label">number</p><input type="number"></div>
<div><p class="label">range</p><input type="range"></div>
<div><p class="label">time</p><input type="time"></div>
<div><p class="label">week</p><input type="week"></div>
<div><p class="label">datalist</p>
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</div>
<div><p class="label">select</p>
<select>
<option value="edge">Edge</option>
<option value="firefox">Firefox</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>
</div>
<div><p class="label">optgroup</p>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</div>
</div>
</body>
</html>