How to change the input value to default?

Issue

How can I fix this problem?
I want when the number is written inside the box, and it goes out of focus, the text and the number do not overlap and the box returns to its default state.

problem

Code:

.left {
  margin-left: 200px;
  margin-top: 200px;
  width: 100rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-group {
  position: relative;
}

.input {
  border-radius: 4px;
  color: #eef5db;
  background-color: transparent;
  outline: 2px solid #eef5db;
  border: 2px solid #eee;
  padding: 4rem;
  width: 30rem;
  text-align: center;
  display: block;
  margin-bottom: 3rem;
  font-size: 30px;
}

.input-lable {
  position: absolute;
  top: 30px;
  left: 10px;
  font-size: 30px;
  transform: translate(10px, 10px);
  transform-origin: left;
  transition: transform 0.25s;
}

.input:focus+.input-lable {
  transform: translate(0, -80px) scale(0.8);
  color: #000000;
}

.input:is(:focus, .valid) {
  outline-color: #000000;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <section class="left">
    <div class="input-group">
      <input type="age" id="name" class="input" />
      <lable for="name" class="input-lable">Enter your guess ...</lable>
    </div>
    <div class="button">
      <input type="button" value="Check" class="check" />
      <input type="button" value="Again" class="again" />
    </div>
  </section>
</body>

</html>

Solution

you just need to create javascript function & call them on onClick

.left {
  margin-left: 200px;
  margin-top: 200px;
  width: 100rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-group {
  position: relative;
}

.input {
  border-radius: 4px;
  color: #eef5db;
  background-color: transparent;
  outline: 2px solid #eef5db;
  border: 2px solid #eee;
  padding: 4rem;
  width: 30rem;
  text-align: center;
  display: block;
  margin-bottom: 3rem;
  font-size: 30px;
}

.input-lable {
  position: absolute;
  top: 30px;
  left: 10px;
  font-size: 30px;
  transform: translate(10px, 10px);
  transform-origin: left;
  transition: transform 0.25s;
}

.input:focus+.input-lable {
  transform: translate(0, -80px) scale(0.8);
  color: #000000;
}

.input:is(:focus, .valid) {
  outline-color: #000000;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <section class="left">
    <div class="input-group">
      <input type="age" id="name" class="input" />
      <lable for="name" class="input-lable">Enter your guess ...</lable>
    </div>
    <div class="button">
      <!-- <input type="button" value="Check" class="check" />
      <input type="button" value="Again" class="again" /> -->
      <input type="button" value="Check" class="check"  onclick="checkClick();" />
      <input type="button" value="Again" class="again" onclick="againClick();" />
    </div>
  </section>
</body>

<script>
  function checkClick(){
    if(document.getElementById("name").value.trim() != ''){
      document.getElementById("name").focus();
    }
  } 

  function againClick(){
    document.getElementById("name").value = "";
  }
 
</script>

</html>

Answered By – Darshan

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.