グループ内のタブを押すと、他のグループがjavascriptまたは手動でフォーカスされるまで、常にそのグループ内で回転するtabindexグループを作成しようとしています。
質問: JavaScript を使用せずにこれを行うことは可能ですか?
HTML コード:
<fieldset>
<input tabindex="1"/>
<input tabindex="2"/>
</fieldset>
<fieldset>
<input tabindex="1"/>
<input tabindex="2"/>
</fieldset>
編集:これを解決するための最後の手段として iframe を使用することをお勧めします。アプリケーションの開発のこの段階で iframe を実装することは非常に困難です。
これは私が思いついたものです
これはかなり厄介なコードですが、これが私が思いついたものです。data-tabgroup要素にとdata-tabgroupindexを追加するとinput、グループから外れることなくそれらが正しくタブ化されます。
steveaxがこのコメントで指摘したように、これは、キーボードを使用しないユーザーや、これが実際には必要ない通常の HTML フォームの状況では推奨されません。
jsFiddle
使用ライブラリの例:
- lodash.js
- jquery1.8.3
HTML コード:
<div>
<input data-tabgroup="first" data-tabgroupindex="1" />
<input data-tabgroup="first" data-tabgroupindex="2" />
<input data-tabgroup="first" data-tabgroupindex="3" />
<input data-tabgroup="first" data-tabgroupindex="4" />
</div>
<div>
<input data-tabgroup="second" data-tabgroupindex="1" />
<input data-tabgroup="second" data-tabgroupindex="3" />
<input data-tabgroup="second" data-tabgroupindex="2" />
<input data-tabgroup="second" data-tabgroupindex="4" />
</div>
JavaScript コード:
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
$(document).on('keydown', '[data-tabgroup]', function (e) {
// TODO
// Get elements tabgroup [DONE]
// Find element position by tabgroupindex
// Check if pressed shift+tab or tab
// Check if it's first or the last element
// Check which is next element to focus
// Focus appropriate element
if (e.which === 9) {
var indexNode = $(e.target);
var nodeIndex = indexNode.data("tabgroupindex");
var tabgroup = indexNode.data("tabgroup");
var tabgroupNodes = $("[data-tabgroup='" + tabgroup + "']");
var tabgroupIndexes = [];
_.each(tabgroupNodes, function (item) {
tabgroupIndexes.push(+$(item).data("tabgroupindex"));
});
tabgroupIndexes = _(tabgroupIndexes).compact()
.sortBy(function (num) {
return num;
}).value();
if (isNumber(nodeIndex)) {
if (e.which === 9) if (e.shiftKey) {
var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) - 1];
if (typeof(nextElement) === "undefined") {
$("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").focus();
console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").get(0));
} else {
$("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
}
} else {
var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) + 1];
if (typeof(nextElement) === "undefined") {
console.log("Im in ")
$("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();
console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").get(0))
} else {
$("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
}
}
} else {
$("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();
}
e.preventDefault();
}
});