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

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... 但是如果我去输入 0 表单输入 1(我的意思是按 shift+tab)或者输入 3 我想隐藏 input2

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>