将焦点切换到另一个元素的焦点正在显示的字段

Question

我有四个输入元素input0，input1，input2和input 3，它们的tabindex为1和2、3、4

<input name="input0" class="input-0" tabindex="1">
<input name="input1" class="input-1" tabindex="2">
<input name="input2" class="input-2" tabindex="3">
<input name="input3" class="input-3" tabindex="4">

输入2默认情况下使用CSS隐藏 并在专注于输入1时显示。

<style>
    .input-2{
        display:none
    }

    .input-1:hover~.input-2{
        display:block
    }
</style>

现在，当我按Tab键并从input1释放焦点时，我想专注于input2 ... 但是如果我从输入1到输入0（我是按Shift + Tab键）或输入3，我想隐藏输入2

jsfiddle Demo

Answer 1

一些JS可以解决问题：

document.querySelector(".input-1").onfocus = function() {showInput()};
document.querySelector(".input-3").onfocus = function() {hideInput()};

//Hides the input if focus is lost on it:
//document.querySelector(".input-2").onblur = function() {hideInput()};


//Binds the Hide to all inputs but input-2
var x = document.querySelectorAll('input');
x.forEach(function(element) {
	if (!element.classList.contains("input-2") && !element.classList.contains("input-1")) {
		element.onfocus = function() {hideInput()};
	}
});

function showInput() {
  document.querySelector(".input-2").style.display = "block";
}

function hideInput() {
  document.querySelector(".input-2").style.display = "none";
}

input{
 display:block;
 margin-top:10px;
}

.input-2{
	display:none
}

.input-1:focus~.input-2{
	display:block
}

<div>
  <input name="input0" class="input-0" tabindex="1">
  <input name="input1" class="input-1" tabindex="2">
  <input name="input2" class="input-2" tabindex="3">
  <input name="input3" class="input-3" tabindex="4">
</div>

Answer 2

将此Jquery代码添加到您现有的代码中：

jQuery代码：

$(document).ready(function(){
  $(".input-1").blur(function(){
    $(".input-2").show();
  });
});

HTML代码：

<div>
    <input type="text" name="input1" class="input-1" value="input 1">
    <input type="text" name="input2" class="input-2" value="input 2">
  <input type="text" name="input3" class="input-3" value="input 3">
</div>

Css代码：

input{
 display:block;
 margin-top:10px;
}

.input-2{
    display:none
}

.input-1:focus~.input-2{
    display:block
}

Answer 3

标记为“ jquery”的jquery版本：

输入2聚焦后将返回初始状态

$(".input-1").focus(function(){
	$(".input-2").show();
});

$(".input-1").focusout(function(){
	$(".input-2").show();
	$(".input-2").focus();
});

$(".input-2").focusout(function(){
	$(".input-2").hide();
});

input{
 display:block;
 margin-top:10px;
}

.input-2{
	display:none
}

.input-1:focus~.input-2{
	display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<input type="text" name="input1" class="input-1" value="input 1">
	<input type="text" name="input2" class="input-2" value="input 2">
  <input type="text" name="input3" class="input-3" value="input 3">
</div>