A Pen by Nathan Bingham.

A-Pen-by-Nathan-Bingham.markdown

A Pen by Nathan Bingham

A Pen by Nathan Bingham on CodePen.

License.

index.html

<input id="search" type="search" placeholder="search modern.IE for ... " data-rotate="html5, css3, javascript, performance" data-period="2000" />

script.js

var TxtWriter = function(el, toRotate, prefix, period) {

  if(this.placeholderIsSupported()){
  
    this.$el = el;
    this.loopNum = 0;
    this.toRotate = toRotate;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
    this.prefix = prefix;
    this.timeout;

  } else {

    console.log('not supported');
    
  }

  };

TxtWriter.prototype.tick = function() {

  var that = this;
  var delta = 300 - Math.random() * 100;
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i].trim();
  
  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }
  
  this.update(this.prefix + this.txt);

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

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

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

};

TxtWriter.prototype.update = function(txt) {
  this.$el.attr('placeholder', txt);
};

TxtWriter.prototype.destroy = function() {
  this.update("");
  clearTimeout(this.timeout);
};

TxtWriter.prototype.placeholderIsSupported = function() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

$(function(){
  
  $('[data-rotate]').each(function(){
      var $this = $(this);
      var prefix = $this.attr("placeholder");
      var txt = new TxtWriter(
          $this,
          $this.data('rotate').split(","),
          prefix,
          $this.data('period'));
      $this.on('focus', function(){
        txt.destroy();
        delete txt;
        $this.attr("placeholder", prefix);
      });
  });

});

style.css

body {
  background-color:#4B5;
}

#search {
  display:block;
  width:80%;
  margin:0 auto;
  border:none;
  padding:1%;
  font-size:1.6em;
}