Блог

Я получил этот код от codepen:

     <h1>
  <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Si.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'>
    <span class="wrap"></span>
  </a>
</h1>
 

JS:

 var TxtType = function(el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
};

TxtType.prototype.tick = function() {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
    this.txt = fullTxt.substring(0, this.txt.length   1);
    }

    this.el.innerHTML = '<span class="wrap">' this.txt '</span>';

    var that = this;
    var delta = 200 - Math.random() * 100;

    if (this.isDeleting) { delta /= 2; }

    if (!this.isDeleting amp;amp; this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
    } else if (this.isDeleting amp;amp; this.txt === '') {
    this.isDeleting = false;
    this.loopNum  ;
    delta = 500;
    }

    setTimeout(function() {
    that.tick();
    }, delta);
};

window.onload = function() {
    var elements = document.getElementsByClassName('typewrite');
    for (var i=0; i<elements.length; i  ) {
        var toRotate = elements[i].getAttribute('data-type');
        var period = elements[i].getAttribute('data-period');
        if (toRotate) {
          new TxtType(elements[i], JSON.parse(toRotate), period);
        }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
    document.body.appendChild(css);
};
 

Источник: https://codepen.io/hi-im-si/pen/DHoup

Мне нужно сделать то же самое, но ввести его в заполнитель, который находится в поле ввода текста.

Я использую WordPress и Elementor, поэтому это нужно ввести.

Вот что я безуспешно пытался сделать:

Я дал класс и атрибуты:

Которые находятся на внешнем div, а также класс находится на внешнем div.

Вход находится внутри div.

Так что это выглядит так:

 <div class="typewrite" data-period="2000" data-type='[ "Hi, Im Si.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'></div>

<input bla bla placeholder="">

</div>
 

А затем изменил эти разделы в Javascript:

 this.el.innerHTML = '<span class="wrap">' this.txt '</span>';
 

to

 this.el.innerHTML = 'placeholder' this.txt '';
 

and

 css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
 

to

 css.innerHTML = ".typewrite > placeholder { border-right: 0.08em solid #fff}";