Keep Focus on Input text after clicking somewhere else-CodePudding

I was working on a input design i made from a youtube video and its working very well but i want to modify it a little bit, the code:

    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
      gap: 30px;
      background: #1d2b3a;
    }
    
    /******************** Input Box - Not Required ********************/
    .inputBox{
      position: relative;
      width: 250px;
    }
    .inputBox input{
      width: 100%;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.25);
      background: #1d2b3a;
      border-radius: 5px;
      outline: none;
      color: #fff;
      font-size: 1em;
      transition: 0.5s;
    }
    
    .inputBox span{
      position: absolute;
      left: 0;
      padding: 10px;
      pointer-events: none;
      font-size: 1em;
      color: rgba(255,255,255, 0.25);
      text-transform: uppercase;
      transition: 0.5s;
    }
    .inputBox input:invalid ~ span,
    .inputBox input:focus ~ span{
      color: #00dfc4;
      transform: translateX(10px) translateY(-7px);
      font-size: 0.65em;
      padding: 0 10px;
      background: #1d2b3a;
      border-left: 1px solid #00dfc4;
      border-right: 1px solid #00dfc4;
      letter-spacing: 0.2em;
    }
    .inputBox input:invalid,
    .inputBox input:focus{
      border: 1px solid #00dfc4;
    }
    
    
    
    /******************** Input Box - Required ********************/
    
    .inputBox_r{
      position: relative;
      width: 250px;
    }
    .inputBox_r input{
      width: 100%;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.25);
      background: #1d2b3a;
      border-radius: 5px;
      outline: none;
      color: #fff;
      font-size: 1em;
      transition: 0.5s;
    }
    
    .inputBox_r span{
      position: absolute;
      left: 0;
      padding: 10px;
      pointer-events: none;
      font-size: 1em;
      color: rgba(255,255,255, 0.25);
      text-transform: uppercase;
      transition: 0.5s;
    }
    .inputBox_r input:valid ~ span,
    .inputBox_r input:focus ~ span{
      color: #00dfc4;
      transform: translateX(10px) translateY(-7px);
      font-size: 0.65em;
      padding: 0 10px;
      background: #1d2b3a;
      border-left: 1px solid #00dfc4;
      border-right: 1px solid #00dfc4;
      letter-spacing: 0.2em;
    }
    .inputBox_r input:valid,
    .inputBox_r input:focus{
      border: 1px solid #00dfc4;
    }
    
    .inputBox_r input:valid ~ span,
    .inputBox_r input:focus ~ span{
      background: #00dfc4;
      color: #1d2b3a;
      border-radius: 2px;
    }

**HTML:**

        <div >
          <input type="text" name="">
          <span>First Name</span>
        </div>
    <br>
        <div >
          <input type="text" name="" required>
          <span>Last Name</span>
        </div>

As you can see there are two inputs one is not mandatory and the other one is mandatory with the required attribute.When you enter text inside the second input box it stas in focus state because of the required attribute and this is exactly what i want with the first input box.

The First input box does not have the required attribute and thats why even if i enter text inside it and click somewhere else it goes out of focus and its messing up my css styling.

So is there any way to keep focus on the first input when text is entered but without passing the required attribute?

I searched for this everywhere but couldnt find anything. Sorry if i said anything wrong, i am new to HTML & CSS

CodePudding user response：

Here's a simple bit of JS that will check if a field has a value in it and add/remove a class of .filled accordingly. Then the CSS is adjusted as well

// Get all .inputBox
const inputBoxes = Array.from(document.getElementsByClassName('inputBox'));

// Get all .inputBox_r
const rInputBoxes = Array.from(document.getElementsByClassName('inputBox_r'));

// Merge both .inputBox and .inputBox_r into 1 array
const allInputBoxes = inputBoxes.concat(rInputBoxes);

// For each box
allInputBoxes.forEach( box => {
  // Get input as first child element
  const input = box.firstElementChild;

  // add event listener for any change on the input
  input.addEventListener('input', () => {

    // if input is not empty add class filled
    // else remove class filled if is empty
    input.value ? input.classList.add('filled') : input.classList.remove('filled')
  })
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  gap: 30px;
  background: #1d2b3a;
}

/******************** Input Box - Not Required ********************/

.inputBox {
  position: relative;
  width: 250px;
}

.inputBox input {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #1d2b3a;
  border-radius: 5px;
  outline: none;
  color: #fff;
  font-size: 1em;
  transition: 0.5s;
}

.inputBox span {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  transition: 0.5s;
}

.inputBox input:invalid~span,
.inputBox input:focus~span,
.inputBox input.filled~span {
  color: #00dfc4;
  transform: translateX(10px) translateY(-7px);
  font-size: 0.65em;
  padding: 0 10px;
  background: #1d2b3a;
  border-left: 1px solid #00dfc4;
  border-right: 1px solid #00dfc4;
  letter-spacing: 0.2em;
}

.inputBox input:invalid,
.inputBox input:focus,
.inputBox input.filled {
  border: 1px solid #00dfc4;
}


/******************** Input Box - Required ********************/

.inputBox_r {
  position: relative;
  width: 250px;
}

.inputBox_r input {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #1d2b3a;
  border-radius: 5px;
  outline: none;
  color: #fff;
  font-size: 1em;
  transition: 0.5s;
}

.inputBox_r span {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  transition: 0.5s;
}

.inputBox_r input:valid~span,
.inputBox_r input:focus~span,
.inputBox_r input.filled~span{
  color: #00dfc4;
  transform: translateX(10px) translateY(-7px);
  font-size: 0.65em;
  padding: 0 10px;
  background: #1d2b3a;
  border-left: 1px solid #00dfc4;
  border-right: 1px solid #00dfc4;
  letter-spacing: 0.2em;
}

.inputBox_r input:valid,
.inputBox_r input:focus,
.inputBox_r input.filled {
  border: 1px solid #00dfc4;
}

.inputBox_r input:valid~span,
.inputBox_r input:focus~span,
.inputBox_r input.filled~span {
  background: #00dfc4;
  color: #1d2b3a;
  border-radius: 2px;
}

<div >
  <input type="text" name="">
  <span>First Name</span>
</div>
<div >
  <input type="text" name="" required>
  <span>Last Name</span>
</div>