spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
55 lines (50 loc) • 1.71 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="inert attribute">
<meta name="author" content="Jihye Hong">
<meta name="description" content="Element which has the value of inert is true is considered as a non-focusable element.
It is shown in the page, but it's impossible to interact with it.">
<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; height:500px;">
<input type="text" value="You can edit this element"><br>
<input id="option" type="checkbox">Check this to edit the forms below:
<br><br>
<div id="inert_elm" inert style="border: 1px solid gray; padding: 10px; opacity: 0.5;">
<textarea>type something</textarea><br>
<input type="radio" name="radio1" checked> radio1
<input type="radio" name="radio1" > radio2
<input type="radio" name="radio1" > radio3
<br><br>
<select>
<option>Hi</option>
<option>Ho</option>
</select>
</div>
</div>
</body>
<script type="text/javascript">
const el = document.querySelector('#inert_elm');
let check_box = document.getElementById('option');
if(check_box.checked)
applyInert(el, check_box.checked);
check_box.onchange = function() {
applyInert(el, check_box.checked);
}
function applyInert(elm, boolean) {
if (boolean) {
elm.inert = false;
elm.style.opacity = '1';
} else {
elm.inert = true;
elm.style.opacity = '0.5';
}
}
</script>
</html>