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

Guide on executing a function when an image loads within the NextJS Image component

I am trying to display a skeleton while my image is loading, but I am facing an issue where the function fires off before the image has fully loaded when using the onLoad prop in the new Image component from NextJS. Below is the code snippet I am working ...

reactjsimagenext.jsnextjs-image

Connection to external sources has been deactivated

I am experiencing an issue on my website at . When attempting to click on a link, it seems to be disabled. I suspect this is due to the presence of two images at the end of the navigation bar. Removing these images causes the navigation bar to fall apart, ...

htmlcssimage

Achieve full height for the span tag within a div using CSS styling

I am facing a particular scenario: In a bootstrap row with 2 columns: - the first column contains a table with a button to add new rows - the second column has a label and a span (although it doesn't have to be a span) Both columns have equal hei ...

htmlcsstwitter-bootstrap

The type 'any' cannot be assigned to the type 'never' as a parameter

const [files, setFiles] = useState([]) const handleChange = (event: any) => { setFiles.push(event.target.files[0].name) return (<div> {files.map((file: any) => ( <p>Hello!</p> ))} </ ...

reactjstypescript

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

What potential factors could lead to an MUI Snackbar failing to produce the accurate class names?

I am facing an issue with displaying notifications on my Gatsby blog whenever the service worker updates. I am using a MUI Snackbar toast for this purpose. However, sometimes the styling of the toast is not applied correctly and it ends up looking like thi ...

javascriptreactjsmaterial-ui

Redis-om and Next.js - Resolving Entity Problems

Currently, I am exploring search functionality with Redis (redis-om) in the new NextJS 13 environment within the app directory. As I follow this tutorial, I encounter an error related to Entity. I'm unsure if this is a bug or if I've made a mista ...

node.jsreactjsnext.jsredis

Ways to update the entire MobX observable array with new values

When working with MobX, is there a way to update the values of an observable array without re-setting every value? At first glance, one might think the solution is: let arr = observable([]); autorun(() => { console.log('my array changed!') ...

javascriptreactjsmobxmobx-react

Managing a click event with an element in React using TypeScript

Hey there, I'm pretty new to TypeScript and React. I have this event where I need to identify the element that triggered it so I can move another element close to it on the page. However, I'm facing some challenges trying to make it work in React ...

reactjstypescripteventsthis

Failure to capture spaces in onChange events for <input> elements

I'm having an issue where the onChange event is not being called on my HTML input element when pressing the space bar. Here's a snippet of what I've tried: class FilterDropDown extends React.PureComponent { state = { query: '&ap ...

htmlreactjs

What is the best way to reset the state in React Hooks?

Just diving into the world of React, I recently went through this handy guide on hooks. Currently, I have a popover feature with a "Show More" option. The challenge lies in displaying additional text upon click and hiding it when the popover is closed. Th ...

reactjsreact-hooks

NextJS: encountered an error with fallback enabled

I have my NextJS setup on Vercel and here is how I configured getStaticPaths: const paths = posts.map((post) => ({ params: { player: post.player, id: post.id }, })) return { paths, fallback: true } However, when I set the fallback to true, I ...

javascriptreactjsnext.jsvercel

Troubleshooting the transition from React version 16.0.0 to React version 18

I am encountering issues with my package.json file and Jenkins build, which fails due to the following problems. I'm currently running npm version 8.15.0 and Node version v16.17.1, while trying to upgrade from React 16 to React 18. package.json { & ...

node.jsreactjsnpmwebpack

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Issues with logging functionality in my React Native application

I am currently facing an issue with my React Native app running on the Android Studio emulator. The logging does not appear in my terminal or in the active remote debugger in Chrome when debugging is enabled. When I attempt to log a simple text in one of m ...

javascriptandroidreactjsreact-nativenpm

Expanding the outer div horizontally by using inner divs with scroll

Is there a way to ensure that all child divs are displayed on the same line within the outer div without wrapping to a second line? The width of the outer div should be fixed so that a scrollbar is visible, allowing us to scroll and view all inner divs. h ...

css

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Seeking assistance to create a dynamic div that continuously expands its width until it reaches a maximum of 540px. It should start at 75px. Below is the HTML and CSS code I've attempted: .Loading-Screen { background-color: black; color: alicebl ...

javascripthtmlcss

Creating a map-like scrolling feature for a full-sized image, allowing both horizontal and vertical movement

My goal is to create an infographic image that can be scrolled horizontally and vertically, zoomed in or out, and where I can add markers just like Google Maps. I attempted the solution of using two scroll views as suggested here: https://github.com/faceb ...

reactjsvue.jsnativescriptnativescript-vue

Encountering an "undefined" error when implementing the useReducer hook in React

I'm encountering an error when using the UseReducer hook in React. Even though I have destructured the state object, I still receive this error: const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{}); return ( ...

javascriptreactjsreact-hookscalculatoruse-reducer

React hooks problem with toggle arrow functionality

Could anyone assist me with the following issue: I have a React Hooks component where I am trying to toggle an arrow when clicking on a span element. It currently works only once, and if clicked again, it does not work anymore. I am confused as to why th ...

reactjs