Tips for dynamically hiding/showing a button depending on the focus of two different HTML inputs

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.


(source: firefoxusercontent.com)


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

javascriptjquerycssanimation

Answer №1

How about trying something like this:

$(function()
{

    $(".lg_email, .lg_psw").on('focus',function()
    {
       $(".bgLogin").show();
       $(".bgUser").hide();
    });


    $(".lg_email, .lg_psw").on('blur',function()
    {
         $(".bgLogin").hide();
         $(".bgUser").show();
    });
});

This method utilizes direct events instead of relying on intervals.

Answer №2

Check out this helpful solution: https://jsfiddle.net/mzvarik/f6g8bau5/

Instead of using <form action="">, simply use <form>. It used to have issues in the past, but now it's unnecessary if left empty.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for editing a JSON file and preserving the modifications?

I have a JSON file with a key (food_image) and I am looking to dynamically assign the index value in a loop to it, such as food_image0, food_image1 ... food_image{loop index}. After that, I aim to save this modified JSON file under a new name. All values ...

javascriptpythonjson

What is the best way to modify Mega Menus using JavaScript?

I am currently managing a website that features "mega menu" style menus. These menus consist of nested <UL> elements and contain approximately 150 to 200 entries, resulting in a heavy load on the page and posing challenges for screen readers. To add ...

javascriptjqueryuser-interfacemenu

Step-by-step guide on positioning mid and bottom text using Bootstrap grid system

After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright ...

htmlcsstwitter-bootstrapbootstrap-4

"Implement highcharts redraw() method to update the chart, along with a callback function that interacts

I am working with a chart that utilizes the events.load function to draw lines based on the properties of the chart. The load function is functioning as expected, but I want to erase and redraw the lines each time the chart is redrawn, such as when hiding ...

javascripthighcharts

What is the best way to refresh the slick jQuery plugin for sliders and carousels?

I am currently facing an issue with two buttons that have the same function. The purpose of these buttons is to retrieve data from an API, convert it to HTML, and then append it to a <div> using jQuery. Finally, the data is displayed using the slick ...

javascriptjqueryhtmlslider

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

javascriptjqueryhtmlcss

Detecting the presence of an object in JavaScript or jQuery

My current code is able to save the HTML content of clicked divs in localStorage and then append it to the #result div when the 'Saved Events' button is clicked. However, I am facing a challenge where I need to check if objects already exist in # ...

javascriptjquery

When a user clicks on a button, AJAX and jQuery work together to initiate a setInterval function that continually

Currently, I have two scripts in place. The first script is responsible for fetching a specific set of child nodes from an XML file through AJAX and using them to create a menu displayed as a list of buttons within #loadMe. What's remarkable about thi ...

javascriptjqueryhtmlajax

Prevent the link from stretching to cover the entire width of the page

I'm looking for a solution that can consistently restrict the clickable link area to just the text within my h2 element. The problem arises when the space to the right of the text is mistakenly included in the clickable region. Here's an example ...

htmlcss

Having trouble with my React App compiling media files

I'm currently working with create-react-app and using a Data.js file where I define objects with properties that are spread as props in a tag. However, when I run npm start or deploy my application, the image doesn't show up. It seems like the co ...

javascriptreactjsimagewebpackcreate-react-app

How to dynamically alter a PHP variable using a JavaScript button click on the existing webpage

I've spent the last hour scouring stackoverflow for answers to my problem, but trying out solutions has only resulted in errors - perhaps because I'm attempting to implement it on the same page. I've experimented with saving the value to a ...

javascriptphphtmlajaxcookies

Can individual column searching be implemented in datatable on the server side?

I am facing some challenges with implementing column filters in datatables server-side. The filter columns are visible but do not seem to be functioning properly. I have reviewed various resources such as the links provided below, but I still cannot resolv ...

jquerycodeigniterdatatables

Utilizing the "return" keyword in Javascript outside of function declarations

Exploring the Impact of Using the Return Keyword in JavaScript Scripts Beyond Functions in Browsers and Node.js Recently, I experimented with utilizing the return keyword in a Node.js script like so: #!/usr/bin/env node return 10; My initial assumption ...

javascriptnode.jsbrowserecmascript-6

The useRef() hook call in NextJs is deemed invalid

I have been attempting to implement the useRef() hook within a function component in my NextJs project, but I keep encountering the error below. Despite reviewing the React Hook guidelines, I am unable to determine why this error persists and the functio ...

javascriptreactjsreact-hooksnext.jsuse-ref

Retrieve a boolean value through an Ajax call from a C# function using T4MVC

I have a search bar on my website with the following code: <form onsubmit="return IsValidCustomer()"> <input class=" sb-search-input" placeholder="Search for a customer..." type="text" value="" name="search" id="search"> <input cl ...

javascriptc#jqueryajaxforms

"What could be the reason why the color property is not being applied to this

I have been attempting to change the color of an icon by using the color property, but for some reason, it is not applying as expected. Here is the code snippet I am working with: "& .MuiListItemIcon-root": { color: "red" }, ...

javascriptreactjsreact-hooksmaterial-ui

leveraging a callback function alongside the useState hook

I'm facing an issue with the change() function. My goal is to call the filteredData() function after the setState operation is completed. Typically, I would use a callback function for this task, but useState doesn't support callbacks. Using useE ...

javascriptreactjsreact-hooks

Utilizing React and Material-UI to create an autocomplete feature for words within sentences that are not the first word

Looking to enable hashtag autocomplete on my webapp, where typing #h would display a menu with options like #hello, #hope, etc. Since I'm using material-ui extensively within the app, it would be convenient to utilize the autocomplete component for th ...

javascriptreactjsmaterial-ui

Creating a highly innovative server infrastructure tailored for Dojo applications with exceptional features

Recently, I have been using web2py for my projects and have found it incredibly useful in creating RESTful web applications. However, I am now looking to expand my skills in JavaScript by developing a more modern and dynamic client-side application that re ...

javascriptajaxframeworksdojo

Identical IDs appearing in multiple buttons causing a conflict

I am currently loading content from external HTML files, specifically page1.html and page2.html. Although everything is the same except for the pictures and text, I am encountering an issue with the close button. It only closes page1.html.Feel free to chec ...

javascriptjquerythisconflict