I have to add blinking pipe into an specific placeholder

Question

I need to include a blinking pipe (as if it were a cursor) at the end of my placeholder. It is a component in liquid code.

I tried to pass a variable with the blinking content through javascript and more recently an infinite animation of 1s in my sass file, but there is no way to do that and I don't know how.

This is my input:

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

I can't add via css the animation like this

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

because i can't asign a class or id only in some part of placeholder

Maybe something like this in sass could be work?

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

I think to try to concatenate a variable through liquid and make the javascript call but it doesn't work for me either... Any tip?

Answer 1

Unfortunately to get what you want you'll need to compromise a bit and just give the illusion you're after. Which may take a little tweaking per instance but you could use javascript to cheat and make it more generic but hopefully this example gives a decent starting place, cheers!

 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

For some reason the input does not focus in the snippet, but this works OK in the browser

 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>