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

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;
}

因为我不能仅在占位符的某些部分分配 class 或 id

也许 sass 中的类似内容可行？

input[type="email"] { animation: blink 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>

Answer 2

由于某种原因，输入没有集中在代码段中，但这在浏览器中工作正常

var inpt = document.getElementById("inp"),
  dv = document.getElementById("dv");
inpt.focus();
inpt.onkeypress = dv.onclick = function() {
  dv.childNodes[0].nodeValue = "";
  inpt.focus()
}
inpt.onkeyup = inpt.onblur = function() {
  if (inpt.value == "") {
    dv.childNodes[0].nodeValue = "Placeholder";
    setTimeout(function() {
      inpt.focus();
    }, 0)
  }
}

#dv {
  display: inline-block;
}

#inp {
  position: relative;
  border: none;
}

<div id="dv">
  Placeholder
  <input id="inp">
</div>

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

I have to add blinking pipe into an specific placeholder

javascript

css

sass

placeholder

liquid