javascript - 我必须将闪烁的管道添加到特定的占位符中

Question

我需要在占位符的末尾包含一个闪烁的管道(就像一个光标)。它是液体代码中的一个组件。

我试图通过 javascript 传递一个包含闪烁内容的变量，最近在我的 sass 文件中传递一个 1s 的无限动画，但没有办法做到这一点，我也不知道如何做。

这是我的输入:

<input type="email"
 name="contact[email]"
 id="{{ formId }}-email"
 class="input-group__field{% if form.errors %} input--error{% endif %}"
 value="{{ form.email }}"
 placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
 {% if form.errors %}
  aria-invalid="true"
  aria-describedby="{{ formId }}-email-error"
  data-form-status
 {% endif %}
>

我不能像这样通过 css 添加动画

@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}
blink {
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
}

因为我不能只在占位符的某些部分分配一个类或id

也许在 sass 中这样的东西可以工作？

input[type="email"] { 动画:闪烁 1s step-start 0s infinite; }

我想尝试通过 liquid 连接一个变量并进行 javascript 调用，但它对我也不起作用......有什么提示吗？

Answer 1

不幸的是，要得到你想要的东西，你需要做出一些妥协，只给你想要的错觉。每个实例可能需要进行一些调整，但您可以使用 javascript 作弊并使其更通用，但希望这个示例能提供一个不错的起点，干杯!

let tempPlaceholder = '';

cleanUp = (me) => {
  const thePlaceHolder = me.parentElement;
  tempPlaceholder = thePlaceHolder.getAttribute('data-placeHolder');
  thePlaceHolder.setAttribute('data-placeholder', '');
}

putItBack = (me) => {
  if (!me.value) {
    const thePlaceHolder = me.parentElement;
    thePlaceHolder.setAttribute('data-placeholder', tempPlaceholder);
    tempPlaceholder = '';
  }
}

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

aside {
  position: relative;
  display: inline-block;
  height: 1.5rem;
}

aside:after {
  content: attr(data-placeholder);
  position: absolute;
  top: .25rem;
  left: .5rem;
  border-right: 1px solid #333;
  color: #555;
  width: 22em; /* IE fallback */
  width: 16ch;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  animation: typing 2s steps(22, end),
	     blink-caret .5s step-end infinite alternate;
}

input {
  height: 1.25rem;
  width: 20rem;
  padding: 0 .5rem;
}

<aside id="placeholder" data-placeholder="I am a placeholder...">
 <input type="text" aria-labelledby="placeholder" onfocus="cleanUp(this)" onfocusout="putItBack(this)">
</aside>