CODEWITHSUNDEEP
jquerycss
Ruchita Sheth
Ruchita Sheth

Reputation: 860

Switch focus to field that is being shown by focus of another element

I have four input elements input0, input1, input2 and input 3 with tabindex 1 and 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">

input 2 is by default hidden using css and will be displayed when it gets focus on input 1

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

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

now when I press tab and loose focus from input1 I want to focus on input2... but if I go to input 0 form input 1 (i mean pressing shift+tab) or to input 3 I want to hide input2

jsfiddle Demo

Upvotes: 0

Views: 67

Answers (3)

Joscha
Joscha

Reputation: 240

A little bit of JS will do the trick:

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>

Upvotes: 1

x3k
x3k

Reputation: 143

Jquery version as you tagged it "jquery":

Will return to initial status after input-2 focus out 

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

Upvotes: 0

user9925311
user9925311

Reputation:

Add this Jquery code to your existing code:

JQuery Code:

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

Html Code:

<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 Code:

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

.input-2{
    display:none
}

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

Upvotes: 0

Related Questions