ユーザーがテキストボックスに入力し、次のように私は2つのテキストボックスとボタンがあり

Question

ボタンに集中できるようにする方法：

私の目標は、ユーザーがtextbox IDに入力されたとき、それはボタンにフォーカスを設定しなければならないということです。私が試した何

：

$(document).on('keypress', '#ID', function() { 
 
    $("#Btn").focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" size="10" id="code" name="code"> 
 
<input type="text" size="10" id="ID" name="ID"> 
 
<input type="button" value="choose" name="Btn" id="Btn">

私はそれに1文字を入力するたびに、私がそれを言っている何をやっているボタンにフォーカスを切り替えます。

しかし、私が持っている質問は、フォーカスがボタンに設定されている間に、ユーザーがテキストボックスに連続して入力できるようにする方法です。私は、ボタンのフォーカスを合わせるべきであるIDのテキストボックスにユーザーが入力したときにのみ、ページの読み込みにボタンを集中させたくありません。

これを達成する方法はありますか？

Answer 1

フォーカスをボタンに変更すると、テキストボックスとの相互作用が防止されます。だから、別の解決策は、次のようになります：

$(document).on('keypress', '#ID', function() { 
 
    $("#Btn").addClass('focused'); 
 
});

.focused { 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" size="10" id="code" name="code"> 
 
<input type="text" size="10" id="ID" name="ID"> 
 
<input type="button" value="choose" name="Btn" id="Btn">

テキストボックスに任意のキー入力があったときは、ボタンにフォーカスが似ているクラスを、割り当てることができます。もちろん、あなたのボタンがフォーカスされていないときと似たように、CSSを調整することもできます。

したがって、ボタンを一貫したルック・アンド・フィールにするには、CSSを少し操作する必要があります。

Answer 2

それとも、general sibling selectorとボタンがときinput[type="text"]なぜあなたはボタンを集中したいん

input[type="text"]:focus ~ input[type="button"] { 
 
    background: red 
 
}

<input type="text" size="10" id="code" name="code"> 
 
<input type="text" size="10" id="ID" name="ID"> 
 
<input type="button" value="choose" name="Btn" id="Btn">