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

Question

我有四个输入元素input0，input1，input2和input 3，have索引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">

默认情况下，使用css隐藏输入2，并在将焦点放在输入1上时显示

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

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

现在，当我按tab键并从input1上松开焦点时，我想要将焦点放在input2上……但是如果我转到input 0表单input 1(我的意思是按shift+tab)或者input 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>

​

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版本：

在输入焦点输出后将返回到初始状态

$(".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>

​