I'm working on a login section and looking to add a unique feature:
When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A USER YET?'
The issue arises when the email input loses focus and the password input gains focus immediately after.
https://i.sstatic.net/0IcKL.png
(source: firefoxusercontent.com)
https://i.sstatic.net/0j7KE.png
(source: firefoxusercontent.com)
This is what I have attempted so far:
The appearance is not essential, only the JavaScript functionality matters
HTML:
<form action="" method="post">
<input type="text" name="email" placeholder="Email" style="width: 120px;height:25px;line-height: 1.1;position: absolute;left: 0;top: 0;border-radius: 3px 0 0 0" class="input-xs form-control lg_email no-shadow-on-focus">
<input type="password" name="password" placeholder="Password" style="width: 120px;height:25px;line-height: 1.1;position: absolute;left: 0;top: 25px;border-radius: 0 0 0 3px" class="input-xs form-control lg_psw no-shadow-on-focus">
<button type="submit" style="width:80px;text-align: center;font-size: 15px;height:50px;line-height: 25px;border-left: none;background-color: blue;display: none;position: absolute;right: 0;top:0;border-radius: 0" class="btn btn-lg btn-primary bgLogin">LOGIN</button>
<button class="f-11 btn bgUser btn-primary" style="width:80px;text-decoration: none;height: 50px;position: absolute;right: 0;top:0;border-radius: 0 3px 3px 0"><span style="letter-spacing: 2px" class="f-13">NOT A</span><br> user yet ? </button>
</form>
JS
setInterval(function(){
if($(".lg_email").is(":focus") || $(".lg_psw").is(":focus")){
$(".bgLogin").show();
$(".bgUser").hide();
}else{
$(".bgLogin").hide();
$(".bgUser").show();
}
},500);
In this way, there is a slight delay before the action triggers.