Enterキーで次の入力欄へ移動する方法について記載します。
関数を作成すれば、初期のonloadで親要素を指定するだけで使用できます。
基礎の項目は地味ですが、それらを組み合わせるだけです。
１．element.form
その要素が所属するフォームを取得する。
document.getElementById(‘topDv’).form
のように記載すると、「topDv」という要素が所属するフォームを取得することができます。
で？と思う方もいるかと思いますが、その要素内部ではなくフォーム全体を処理するために
必要となってくる処理です。
※無くてもできます。
２．form.elements
フォームに含まれる全ての要素を取得できます。
全ての要素の個数は、
form.elements.length
のように取得できるので、for文などで処理を行う際に使用することが可能です。
今回は１の「element.form」と、組み合わせる感じで作成します。
３．キー・コード
キー・イベント（キーボードのキーを押した時などの処理）で、「その」キーが押されたかを判別するために、
押されたキーを識別することが必要です。
ev.keyCode
のように、イベント.keyCodeと記載して取得することができます。
if (ev.keyCode == 13)
とすれば、Enterキーが押されたときのイベントの判定ができます。
その他、「Tabキーは9」、「Escキーは27」などがあります。
４．完成形
フォーム側は、
<div id="topDv">
<input /><br />
<input /><br />
<input /><br />
<input /><br />
</div>
のように記載しておいて下さい。
javascript側は、
const kc_Enter = 13;
window.onload = function () {
setAttr_keydown(document.getElementById('topDv'));
}
function setAttr_keydown(el) {
if (el != null && el.tagName != 'BUTTON') {
setEvent(el);
let cnt = el.children.length;
for (let i = 0; i < cnt; i++) {
setAttr_keydown(el.children[i]);
}
}
}
function setEvent(el) {
if (el == null) { return; }
el.addEventListener('keydown', moveNextElm);
el.addEventListener('focus', focusInput, false);
}
function moveNextElm(ev) {
if (ev.shiftKey == true) { return; }
if (ev.keyCode == kc_Enter) {
try {
let el = getNextElm(ev.target);
if (el != null) { el.focus(); }
el = null;
} catch (e) { }
}
}
function getNextElm(field) {
let form = field.form;
for (var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e]) { break; }
}
for (let n = e + 1; n < form.elements.length; n++) {
if (form.elements[n % form.elements.length].style.display != 'none'
&& form.elements[n % form.elements.length].type != 'hidden') {
return form.elements[n % form.elements.length];
}
}
for (let n = 0; n < e; n++) {
if (form.elements[n % form.elements.length].style.display != 'none'
&& form.elements[n % form.elements.length].type != 'hidden') {
return form.elements[n % form.elements.length];
}
}
}
function focusInput(ev) {
try { ev.target.setSelectionRange(0, ev.target.value.length); }
catch { }
}
document.onkeypress = enter;
function enter() {
if (window.event.keyCode == kc_Enter) {
return false;
}
}
のような感じになります。
システム開発のためのJavaScriptプログラミングに戻る
