How to change the input value to default?-CodePudding

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 >
    <div >
      <input type="age" id="name"  />
      <lable for="name" >Enter your guess ...</lable>
    </div>
    <div >
      <input type="button" value="Check"  />
      <input type="button" value="Again"  />
    </div>
  </section>
</body>

</html>

CodePudding user response：

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 >
    <div >
      <input type="age" id="name"  />
      <lable for="name" >Enter your guess ...</lable>
    </div>
    <div >
      <!-- <input type="button" value="Check"  />
      <input type="button" value="Again"  /> -->
      <input type="button" value="Check"   onclick="checkClick();" />
      <input type="button" value="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>

CodePudding user response：

You have to check via Javascript if there is any value in that input, and if so, add a class that prevents shrinking.

CodePudding user response：

You can simply remove label and instead of it, set placeholder in input

<input type="age" id="name"  placeholder="Enter your guess" />

CodePudding user response：

.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: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 >
    <div >
      <input type="age" id="name"  placeholder="Enter your guess .."/>
      
    </div>
    <div >
      <input type="button" value="Check"  />
      <input type="button" value="Again"  />
    </div>
  </section>
</body>

</html>

CodePudding user response：

Here is my try

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

/* Added this line */
.input:not(:focus) {
    color: white;
}

<!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 >
    <div >
      <input type="age" id="name"  />
      <lable for="name" >Enter your guess ...</lable>
    </div>
    <div >
      <input type="button" value="Check"  />
      <input type="button" value="Again"  />
    </div>
  </section>
</body>

</html>

If you want to delete the input value, I think better use Javascript, hope this work!