Textbox、フォーカスの移動だけでページの描写を切り替える
https://gyazo.com/5d52123d23a41cf2dacf282ca7e0701f
2022/3/13
実装したこと
1. フォーカスの切り替えが起きたらページの描写を切り替える
実際は、フォーカスが当たっているボタンのクリックイベントを発生させている
2. command + 左右キーでボタンのフォーカスを移動させる
末端まで来たら先頭に、先頭からは末端にのループを実現している。
Tabキーでも移動できるが、その場合はループにならない点に注意。
code:script.js
//フォーカスの移動でクリックイベントを発生させる
const btns = document.querySelectorAll('buttontype="linkbtn"');
btns.forEach(function(userItem) {
userItem.addEventListener('focus', (event) => {
event.target.click();
event.target.style.background = 'pink';
});
userItem.addEventListener('blur', (event) => {
event.target.style.background = '';
});
});
ショートカットキー
code:script.js
//opiton + command + 左右でボタンのフォーカスを移動する
document.addEventListener("keydown", event => {
if (event.metaKey && event.keyCode === 39) {
var current = document.activeElement;
var next = current.nextElementSibling;
if (next) {
next.focus();
}else{
var parent = current.parentNode;
parent.firstElementChild.focus();
}
}
});
document.addEventListener("keydown", event => {
if (event.metaKey && event.keyCode === 37) {
var current = document.activeElement;
var previous = current.previousElementSibling;
if (previous){
previous.focus();
}else{
var parent = current.parentNode;
parent.lastElementChild.focus();
}
}
});
#TextBox