如何允许用户键入文本框并将焦点放在按钮上

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">

​

每次我在里面输入一个字母时，都会将焦点切换到按钮上，这是我告诉它的。

但是，我的问题是，如何让用户连续地输入文本框，而焦点设置在按钮上？我不希望按钮集中在页面加载上，只有当用户输入到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

或者，当普通同胞选择器有焦点时，可以使用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">

​