html - 如何使按钮仅在输入聚焦时出现

Question

这是我的 HTML:

<template>
  <div>
    <div v-if="id!==undefined">
      <strong>ID</strong>
      <input
        id="id"
        v-model="id"
        type="text"
        readonly
      >
        <button
          type="button"
          @click="doCopy"
        >
          <font-awesome-icon :icon="copyIcon" />
        </button>
    </div>
  </div>
</template>

这是我的 CSS:

<style scoped>
  input {
    margin-left: 2px;
    border: none;
  }
  input:focus {
    border: 1px solid #21abd4;
    border-radius: 5px;
    button: visible;
  }
  button {
    visibility: hidden;
    border: none;
    background: none;
  }

</style>

我想要只在输入聚焦时才显示按钮的东西，尝试了多种方法，例如尝试从内部调用按钮。 input:focus 但 IDE 对此有提示。尝试配对 input:focus + button 但这也不起作用所以不确定如何将两者链接在一起 :(

任何指针都会很棒。

Answer 1

您可以使用 CSS adjacent sibling selector (+)要做到这一点:

   input:focus + button

选择紧跟在 input:focus 元素之后的 button。

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>

也就是说，Vue 中还有一些方法可以更新共享状态，并根据输入状态设置按钮的可见性。