How to detect autocomplete list mouseover and hide the palceholder span

user_7453565 0
Viewed 52

I have a span instead of plaseholder, When I mouse over on the items in the autofill list, I want to also hide the span.placeholder at the sametime such as default placeholder.

enter image description here 

form {
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    form input {
        position: absolute;
        font-size: 16px;
        height: 100%;
        display: block;
        background: transparent;
        border: none;
        margin: 0;
        outline: none;
        width: calc(100% - 10px);
        top: 0;
        left: 0;
        padding: 0px 5px;
    }

    div.inputs_div {
        position: relative;
        width: 200px;
        height: 22px;
        display: block;
        background: #fff;
        padding: 5px 5px;
        border: 1px solid black;
    }

    span.placeholder {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        display: block;
        font-size: 16px;
        pointer-events: none;
    }
   <form>
        <div class="inputs_div">
            <input type="text" name="username" />
            <span class="placeholder">User Name</span>
        </div>
    </form>

css html jquery javascript
1 Answers

You can use input and check if input is empty or not , if yes than remove text else show text

Here used display property you can use according to preferences like visibility , color: white

It will be direct answer if you provided the autocomplete code but you can use input focus to trigger and check if input is filled or not

function toogleText() {
  var text = document.getElementById("placeholder1");
  var inputDemo = document.getElementById("inputDemo").value;

  if (inputDemo != "") {
    text.style.display = "none";
  } else {
    text.style.display = "block";
  }
}

document.getElementById("inputDemo").addEventListener("input", toogleText)
form {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

form input {
  position: absolute;
  font-size: 16px;
  height: 100%;
  display: block;
  background: transparent;
  border: none;
  margin: 0;
  outline: none;
  width: calc(100% - 10px);
  top: 0;
  left: 0;
  padding: 0px 5px;
}

div.inputs_div {
  position: relative;
  width: 200px;
  height: 22px;
  display: block;
  background: #fff;
  padding: 5px 5px;
  border: 1px solid black;
}

span.placeholder {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  display: block;
  font-size: 16px;
  pointer-events: none;
}
<form>
  <div class="inputs_div">
    <input type="text" name="username" id="inputDemo" />
    <span class="placeholder" id="placeholder1">User Name</span>
  </div>
</form>

user_168463460
Related