How To Make A Button Appear Only When Input Is Focused
here is my HTML:
ID
Solution 1:
You can use the CSS adjacent sibling selector (+) to accomplish this:
input:focus + buttonto 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><inputid="id"type="text"readonly /><buttontype="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.
Solution 2:
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;
}<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputtype="text"/><button>Submit</button>
Post a Comment for "How To Make A Button Appear Only When Input Is Focused"