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

将焦点更改为按钮将阻止与文本框的任何交互。因此，替代解决方案将类似于以下内容：

＆＃13;

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

＆＃13;

.focused {
  border: 1px solid blue;
}

＆＃13;

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

＆＃13;

当文本框上有任何按键时，您可以将类似于焦点的类指定给按钮。当然，CSS可以进一步调整，以便您的按钮看起来与未聚焦的按钮类似。

因此，您需要对CSS进行一些处理，以使按钮具有一致的外观。

Answer 2

或者，当input[type="text"]有焦点

时，您可以使用general sibling selector定位按钮

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

如何允许用户键入文本框并专注于按钮

2 个答案: