2017-08-10 9 views
0

タブのように動作するように入力キーをどのようにシミュレートしますか?私はjQueryを使いたくない。現在の入力(テキストフィールド)と次の(入力)要素に焦点を当てるだけで、ぼかし(ゆるいフォーカス)する必要があります。私はこれを試みたが、それは動作しません。HTMLフォームのフォーカス

const handleKeyUp = (event) => { 
const keyCode = event.keyCode || event.which; 
if (event.target.value !== '' && keyCode === 13) { 
    event.preventDefault(); 
    event.target.blur(); 
    event.target.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab' })); 
    } 
    }; 

答えて

0

イベントをシミュレートすることで、デフォルトのブラウザ動作をトリガすることはできません。

タブ順で次のフィールドを特定し、DOMでそのフィールドを探し、focus()メソッドを呼び出す必要があります。

0
$(document).on('keydown', ':tabbable', function (e) { 
    if (e.which == 13 || e.keyCode == 13 ) { 
     e.preventDefault(); 
     var $canfocus = $(':tabbable:visible') 
     var index = $canfocus.index(document.activeElement) + 1; 
     if (index >= $canfocus.length) index = 0; 
     $canfocus.eq(index).focus(); 
    } 
}); 

Example

+0

言及した質問に、彼はjqueryのを使用する必要はありません。しかし、この答えは将来も生きていてください。 – reporter

+0

これは、 'tabindex'に基づく順序変更を無視してDOM順にナビゲートします。 – Quentin

関連する問題