CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue.

However, as soon as I start typing in the next input field, the blue underline disappears from the first field.

What I really want is for the first input field to stay underlined even after I move on to the second input field, as well as for the other four input fields.

To achieve this, I have utilized the focus selector:

input[type='tel'].InputField:focus {border: 0 none; border-bottom: 2px solid blue; border-bottom-left-radius: 0; border-bottom-right-radius: 0; outline: none;}
cssreactjs

Answer №1

The snippet of CSS code you provided will apply a blue border to the input field when it is in focus, as specified by the :focus pseudo-class.

input[type='tel'].InputField:focus {
   border: 0 none;
   border-bottom: 2px solid blue;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; outline: none;
}

To address your issue, you can consider using the :placeholder-shown pseudo-class to create a workaround:

input[type="tel"]:not(:placeholder-shown) {
  background-color: cyan;
  border: 1px solid blue;
}
<input type="tel" placeholder=" ">

<input type="tel" placeholder=" ">

This solution, based on ngryman's answer on Stack Overflow, relies solely on CSS and can be styled accordingly using the ReactJS syntax for your project needs.

Answer №2

To enhance the styling of your inputs, consider creating a new css class with similar styles, such as "afterEdit" (you can choose any name you prefer).

Next, set up an event listener to detect changes in the input using the onChange attribute. Whenever a change is detected in any input field, apply the "afterEdit" css class dynamically. This ensures that even after moving to another input field and losing focus, the focus styles remain visible.

You can achieve this by managing the className property based on whether the input has been changed or not. For example:

render() {
 const isChanged = this.state.inputA.changed;
 let className = ['InputField'];
 if(isChanged) className.push('afterEdit');
 return <input className={className.join(' ')} />

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

Leveraging NextJS and React's Context API by incorporating a layout component wrapper

My current setup is as follows: I have a layout component where I include a navigation component and children. I enclose them within my Provider like this AppLayout.js <Layout> <Navigation/> <main> {children} </main> < ...

reactjsnext.jsreact-context

``Unfortunately, the Ant Design Component does not function properly when imported``

I'm completely baffled by the issue I'm facing right now. My logic seems to have just vanished into thin air. Something suddenly stopped working, even though I didn't make any changes. The code works perfectly in production, but for some rea ...

reactjsmeteornpmantdmeteor-react

"Exploring the variations in design between wordpress.com and self-hosted wordpress

I'm currently puzzling over the source of the disparities in style between my Wordpress site hosted elsewhere and my identical theme on Wordpress.com. It's perplexing to see such contrasting appearances while I migrate my blog. After some irrele ...

csswordpressstyleswordpress.com

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

javascriptreactjstypescriptnext.jserror-handling

Guide on including a dropdown-item within the navbar

I've implemented a header with a navbar inside. I want to create a dropdown menu element, but for some reason, my item is not appearing. On this link, it looks simple: https://getbootstrap.com/docs/4.0/components/navs/ Pills with dropdowns <l ...

htmlcssdrop-down-menubootstrap-4navbar

CSS: Adjusting the position of tooltips to align with the triggering element (rest of code is fully functional)

Looking to create a custom tooltip without relying on plugins. The goal is to align the tooltip vertically to the right of the triggering element, in this case, an input field. The current setup (see Fiddle demo) achieves the desired layout and content fo ...

csspositioncss-position

What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have: The display looks optimal with high-resolution landscape photos. This is the HTML and CSS code in use: <div class="upload-thumb ng-scope visible"> <span class="delete-media"> <span class="icon-bin ...

javascripthtmlcss

"Gone in a Scroll: Div vanishes as page moves

Fiddle: http://jsfiddle.net/ud6hejm6/ I was tasked with creating a website for a video game tournament. By opening the fiddle link provided, you can preview the page layout. A central div is featured in the design: <div class="middle teko" id="mezzo"& ...

jqueryhtmlcss

Tips for executing an npm command within a C# class library

I am currently developing a project in a class library. The main objective of this project is to execute a JavaScript project using an npm command through a method call in C#. The npm command to run the JavaScript project is: npm start The JavaScript ...

javascriptc#reactjsnpmclass-library

Hovering over the Jquery menu will display only the first child element

Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance woul ...

jquerycssjquery-ui

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass

Having trouble with cy.clock and cy.tick functionality when using split code

In my React.js project, I have a countdown using setInterval from 15 to 0 seconds. However, in e2e tests, I need to speed up this process as 15 seconds may not be suitable for testing purposes. The following code achieves the desired result: describe(&apo ...

reactjscypresscypress-clock

I was able to efficiently reverse the transition using JavaScript, but I'm puzzled as to why my alternate approach is not functioning correctly

Check out my demo on jsfiddle I am trying to implement a reverse transition when clicking the <li> again. The commented code did not work, but the code below worked perfectly: let dbclickre = true; function flipped() { if (db ...

javascripthtmlcss

Tips for aligning Bootstrap Cards evenly on a webpage

I am currently working on a React project that utilizes Bootstrap, and I am encountering some difficulties trying to center the Bootstrap Cards with consistent spacing on my website. The gap between each set of three cards is too large, and the alignment o ...

reactjsbootstrap-4gridgrid-layoutbootstrap-cards

What are the steps for rearranging a table column?

I am trying to show a text file in a table and allocate some code to each entry. I can display the text file. I can assign the code for each record (though this part is still under development). However, I have encountered an issue. The columns of the t ...

phphtmlcsshtml-table

center items alignment with hidden tags

I'm currently facing an issue with the CSS property display: flex, align-items: center Here is a snippet of my HTML and CSS files: * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; } .na ...

htmlcss

Error message during Jest Enzyme testing: The "store" was not located within the scope of "Connect(App)"

I am faced with an issue in my index.js file, which includes: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App' import * as serviceWorker from './servi ...

reactjsjestjsenzyme

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

javascripthtmlioscssmobile

The curious case of ReactJs/NextJs useEffect(): Unveiling its mysterious double invocation

My custom useEffect() hook is consistently executed twice. It relies on two dependencies: reinitializePage (which triggers the useEffect when set to true) and corporateContext (which updates the component when the context changes). const [reinitializePage, ...

reactjsnext.jsuse-effect

How can I integrate React-Router Link as a component within Material-UI using Typescript?

Hey everyone, I've encountered an issue while trying to utilize Material UI's component prop to replace the base HTML element of a component. Error: The error message reads: Type 'Props' is not generic. This problem arises from the fo ...

reactjstypescriptreact-routermaterial-uistyled-components