[Vuejs]-How to make a button appear only when input is focused

by

3👍

✅

You can use the CSS adjacent sibling selector (+) to accomplish this:

   input:focus + button

to select a button that comes immediately after an input:focus element.

input {
  margin-left: 2px;
  border: none;
}

input:focus {
  border: 1px solid #21abd4;
  border-radius: 5px;
}

input:focus + button {
  visibility: visible;
}

button {
  visibility: hidden;
  border: none;
  background: none;
}
<div>
  <div >
    <strong>ID</strong>
    <input id="id" type="text" readonly />
    <button type="button" @click="doCopy">
      Copy 
    </button>
  </div>
</div>

That said, there would also be ways in Vue to update a shared state, and set the visibility of the button based on the state of the input.

👤Brett DeWoody

0👍

This can be done fairly easily with jQuery:

$("input").focus(function() {
  $("button").css("visibility", "visible");
});

$("input").focusout(function() {
  $("button").css("visibility", "hidden");
});
button {
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"/><button>Submit</button>
👤scatter

Leave a comment