JavaScript入力フォーカス切り替え

私は以下のコードを私の新しいWebアプリケーションで使用していますが、私はそれを動作させるようには思えません。私はページを読み込めるようにしたいですクライアントが「Tab」キーを押すと、他の入力フィールドにフォーカスが移ります。入力フィールドは2つしかありませんが、これは簡単です（少なくとも私は思った：P）。とにかく誰もがこれで私を助けることができますか？私はその仮定の下で、この例を書いたように、あなたはあなたのJavaScriptで$を使用するので、事前に感謝:)JavaScript入力フォーカス切り替え

var body = document.querySelector('body'); 

body.onkeydown = function (e) { 
    if (!e.metaKey) { 
     // e.preventDefault(); 
    } 
    if (e.code == "Tab") { 
     console.log(e.code); 
     if ($('#username').is(":focus")) { 
      $('#password').focus(); 
     } else if ($('#password').is(":focus")) { 
      $('#username').focus(); 
     } 
    } 
}

出典

2016-09-27 BlackVikingPro

タブオーダーを指定するのに 'tabindex =" 1 "' HTMLプロパティを使うだけです – Vijai

私はあなたがjQueryのを使用していると仮定しています。私はあなたがタブキーを押してもそれに関係なくフィールドにタブすることを前提としています。デフォルトではid="username"入力エレメントになっています。私はpreventDefaultに通常のタブの動作を止めるために追加しました。タブの正常な動作が、正しく機能しない原因になっているようです。私はあなたを誤解しておらず、これが助けてくれることを願っています。

$("body").on("keydown", function(e) { 
 
    if (e.which !== 9 && e.keyCode !== 9) { 
 
    return; 
 
    } 
 
    console.log("Which Value:", e.which); 
 
    console.log("KeyCode Value:", e.keyCode) 
 

 
    e.preventDefault(); 
 
    if (!$('#username').is(":focus")) { 
 
    $('#username').focus(); 
 
    } else { 
 
    $('#password').focus(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <input id="username"> 
 
    <input id="password"> 
 
</body>

EDIT：あなたはjQueryのセレクタなしでこれをやってみたかった場合

。ここで別の例です：

var body = document.getElementsByTagName("body"); 
 

 
body[0].onkeydown = function(e) { 
 
    var username = document.getElementById("username"); 
 
    var password = document.getElementById("password"); 
 
    if (e.which !== 9 && e.keyCode !== 9 && e.code !== "Tab") { 
 
    return; 
 
    } 
 
    e.preventDefault(); 
 
    if (document.activeElement !== username) { 
 
    username.focus(); 
 
    } else { 
 
    password.focus(); 
 
    } 
 
}

<body> 
 
    <input id="username"> 
 
    <input id="password"> 
 
</body>

出典

2016-09-28 00:21:40 zken

すごい！これはうまくいった！本当にありがとう！！！ – BlackVikingPro

問題ありません。私は助けになることができてうれしいです。 – zken

は単純に、ユーザーIDにデフォルトのフォーカスを作るためにautofocusを使用したときに、ユーザープレスTabキーパスワードに移動しtabindexを使用しています。

UserId :<input type="text" name="fname" autofocus tabindex="1"> 
 
Password: <input type="text" name="fname2" tabindex="2">

出典

2016-09-28 00:32:00 Vijai

あなたはそれがとにかくやろうとしていたものを伝播するとやってから、タブのイベントを停止するe.PreventDefaultを（）が必要です。タブキーのイベント伝播のみを無視します。

body.onkeydown = function (e) { 
    if (e.code == "Tab") { 
     console.log(e.code); 
     if ($('#username').is(":focus")) { 
      $('#password').focus(); 
     } else if ($('#password').is(":focus")) { 
      $('#username').focus(); 
     } 
     e.preventDefault(); 
    } 
}

また、パスワード入力時にtype = "password"を設定することを検討してください。

出典

2016-09-28 00:32:14 LinuxDisciple

JavaScript入力フォーカス切り替え

答えて

関連する問題