我如何检测输入框何时未聚焦

Question

我需要知道输入框何时没有焦点，但我不知道该怎么做。

我一直在尝试使用

input:not(:focus)

，但它对我不起作用。

是发生的视频。如果你不想看视频，这里有一个简短的总结：
我希望输入框在您聚焦/不聚焦时设置动画。使用

input:not(:focus)

，它会立即发生，而不是我将其设置为 0.5 秒，并且删除

input:not(:focus)

使其具有动画效果，但是当我取消输入框的焦点时它会立即返回。

Answer 1

显而易见的答案是为您希望设置动画的类型的所有元素设置样式，例如

input[type=text]

，为

:focus

状态使用不同的样式并在它们之间设置动画（除非我误解了您问题中的某些内容），如下：

:root {
  /* using CSS custom properties to define the
     colors in one place, for use everywhere
     (within the descendants of the element
     in which they're defined, which is everything
     for the :root (<html>, in browsers) element: */
  --colorOne: hsl(300deg 100% 100% / 1);
  --colorTwo: hsl(300deg 95% 90% / 1);
}

form {
  inline-size: clamp(30rem, 70%, 900px);
  margin-inline: auto;
}
fieldset {
  gap: 0.5rem;
  grid-template-columns: max-content;
  place-items: center;
}

label {
  border-radius: 50rem;
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
  justify-content: start;
  margin-block: 1rem;
  padding: 0.5rem;
}

label:focus-within {
  outline: 0.2rem solid var(--colorTwo);
}

.labelText {
  flex-basis: max-content;
  text-align: end;
}

.labelText::after {
  content: ': ';
}

input {
  /* styling the default state of the <input>
     elements: */
  background-color: var(--colorOne);
  padding-inline-start: 0.5rem;
  /* the transition will occur on the 'way out'
     of this state, and on the 'way into' this
     state; it's worth noting that I set the
     transition duration to 750ms (0.75s) in 
     order to make it more obvious, obviously
     adjust this to your use-case: */
  transition: background-color 750ms linear;
}

input:focus {
  /* styling the focused state: */
  --colorOne: var(--colorTwo);
}

<form action="#" method="post">
  <fieldset>
    <legend>Demo</legend>
    <label>
  <input type="text" placeholder="input one">
  <span class="labelText">Label for input one</span>
</label>
    <label>
  <input type="text" placeholder="input two">
  <span class="labelText">Label for input one</span>
</label>
    <label>
  <input type="text" placeholder="input three">
  <span class="labelText">Label for input one</span>
</label>
    <label>
  <input type="text" placeholder="input four">
  <span class="labelText">Label for input one</span>
</label>
    <label>
  <input type="text" placeholder="input five">
  <span class="labelText">Label for input one</span>
</label>
    <label>
  <input type="text" placeholder="input six">
  <span class="labelText">Label for input one</span>
</label>
  </fieldset>
</form>

Answer 2

我认为这就是你想要实现的，这里我将过渡设置为 500ms，如果你想要更慢的设置为 1s，但是 500ms 对输入字段来说已经足够了。

input{
  padding: .5rem;
  border-radius: 4px;
  /* border-color set to #444 at
  beginning of the transition "no focus" */
  border: 2px solid #444;
  transition: border-color 1s ease-out;
  outline: none;
  
}
input:focus{
  border-color: #aaa;
}

<input type="password" placeholder="Password" />

我如何检测输入框何时未聚焦

问题描述投票：0回答：2

2个回答

最新问题

我如何检测输入框何时未聚焦

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2