CSS/React JS: I want the input fields to remain focus after inputing the values

Question

I have a confirmation code that consist of 6 digits. When I click on one of the input fields, the field is in focus and is underlined with a blue color.

But when I input in the next input field, the first input field, the underline blue color disappears.

I want the first input field to remain underline when i fill the second input field and same for the other 4 input fields.

I have used 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;}

Do you mean that you want them all to have the same border all of the time, or do you only want the fields that have values to have the border? — Winter, Sep 18 '18 at 11:30
I want all to have the same border but only after inputing the values — Pikachu, Sep 18 '18 at 11:31

Ron F · Answer 1 · 2018-09-18T11:42:33.123

0

You can create another css class that contains the same styles, let's call it "afterEdit"(You can name it as you want).

Then, you need to listen to the input changes with the onChange attribute. For each input, after you catch a change, you need to apply the "afterEdit" css class, so although you move to another input, and you lose the focus on the input element, you still apply the focus styles.

You can do it with className, lets say you save in the state, a boolean indicates whether the input has been changed. So you can modify the className of the input element:

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

edited Sep 18 '18 at 11:42

answered Sep 18 '18 at 11:33

Ron F

370
2
14

You could also do a length check on the input to see if it has a value... – Winter Sep 18 '18 at 11:51
You are right, he can do it too. He can use any method in order to detect a change in input whether it is the length property or using the state. Eventually, he will have to apply the "afterEdit" css class which is the a copy of the focus class. – Ron F Sep 18 '18 at 12:01

score 0 · Accepted Answer · answered Sep 18 '18 at 12:03

0

The CSS Code snippet you've posted will only highlight the input field with blue border when it is in focus meaning when it is selected as you have stated in the pseudo-class :focus

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;
}

A probable solution to your question can be a workaround using the :placeholder-shown pseudo class like this:

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

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

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

Mine is a CSS-only answer is based on ngryman's answer here. Style it accordingly using the ReactJS syntax for your use.

answered Sep 18 '18 at 12:03

retr0

644
6
16

the browser support for `:placeholder-shown` is a little dodgy https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown#Browser_compatibility – Winter Sep 18 '18 at 12:14
It is not working. I have removed the focus and added the :placeholder-shown. It is underlying all the input text before entering the digits – Pikachu Sep 19 '18 at 03:56
My code snippets are enough to guide you. Just replace or remove the `background-color` attribute. The answer can only guide you. It won't do your job man. Google or something. I apologize beforehand if my words hurt you but that's it. Also, don't leave the placeholder attribute empty. Put a SPACE character `' '` in it. – retr0 Sep 19 '18 at 06:36
No Offence for the rude comment :). It worked!!! Thanks for the help :D – Pikachu Sep 19 '18 at 08:22

CSS/React JS: I want the input fields to remain focus after inputing the values

2 Answers2