1. ホーム
  2. javascript

[解決済み] JavascriptでEnterキーを押すとTabのような動作をする。

2023-08-22 13:33:22

質問

Enter キーを押すとページ上の "next" form 要素にフォーカスが移動するようなフォームを作成したいと思っています。私が Web 上で見つけ続けている解決策は...

 <body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">

残念ながら、それはIEで動作するように見えるだけです。この質問の真意は、FFとChromeで動作する解決策を知っている人がいれば教えてください。加えて、私はむしろ、FFとChromeのために onkeydown イベントを追加する必要はありませんが、それが唯一の方法である場合、それを行う必要があります。

この問題は 質問 905222 に似ていますが、私の意見では、それ自身の質問に値します。

編集:また、ユーザーが慣れているフォームの動作から乖離しているので、これは良いスタイルではないという問題を提起する人を見ました。私もそう思います! これはクライアントの要望です :(

どのように解決するのですか?

私は非常に効果的であるアンドリューによって提案されたロジックを使用しています。そしてこれが私のバージョンです。

$('body').on('keydown', 'input, select', function(e) {
    if (e.key === "Enter") {
        var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

KeyboardEventのキーコード(すなわち e.keycode ) 減価償却費のお知らせ :-) https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode