我必須將閃爍的管道添加到特定的占位符中

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

也許在薩斯這樣的事情可能有用嗎？

input[type="email"] { animation: blink 1s step-start 0s infinite; }

我想嘗試通過液體連接一個變量並進行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>