javascript - Caret is not blinking in placeholder -

i'm using jquery plugin typed.js - http://www.mattboldt.com/demos/typed-js/

however cannot caret blink in placeholder. here have far: (hopefully formatting works out, tried moderator did previous post!)

html:

<div class="search"> <div class="type-wrap">     <input id="typed" placeholder="" required='true' type='text' style="white-space:pre;"> </div> 

css:

.search { background: rgba(0, 0, 0, 0.5); display: flex; max-width: 400px; margin-left: auto; margin-right: auto; margin-bottom: 10px; margin-top: 20px; } .search input { max-width: 370px; margin-left: auto; margin-right: auto; margin-bottom: 10px; margin-top: 20px; border: 0px; margin: 12px; padding: 0px; } .search input[type="text"] { flex: 1; background: transparent; font-size: 2.5em; width:680px; } } .search input:focus { outline: none; } .typed-cursor { opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink { 0% {     opacity:1; } 50% {     opacity:0; } 100% {     opacity:1; } } @-webkit-keyframes blink { 0% {     opacity:1; } 50% {     opacity:0; } 100% {     opacity:1; } } @-moz-keyframes blink { 0% {     opacity:1; } 50% {     opacity:0; } 100% {     opacity:1; } } .search input[type="text"]::-webkit-input-placeholder { color: white; } 

javascript:

// mit license (mit)  // tyepd.js | copyright (c) 2014 matt boldt | www.mattboldt.com  // permission hereby granted, free of charge, person obtaining copy // of software , associated documentation files (the "software"), deal // in software without restriction, including without limitation rights // use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of software, , permit persons whom software // furnished so, subject following conditions:  // above copyright notice , permission notice shall included in // copies or substantial portions of software.  // software provided "as is", without warranty of kind, express or // implied, including not limited warranties of merchantability, // fitness particular purpose , noninfringement. in no event shall // authors or copyright holders liable claim, damages or other // liability, whether in action of contract, tort or otherwise, arising from, // out of or in connection software or use or other dealings in // software.     ! function ($) {  "use strict";  var typed = function (el, options) {      // chosen element manipulate text     this.el = $(el);     // options     this.options = $.extend({}, $.fn.typed.defaults, options);      // text content of element     this.text = this.el.text();      // typing speed     this.typespeed = this.options.typespeed;      // add delay before typing starts     this.startdelay = this.options.startdelay;      // amount of time wait before backspacing     this.backdelay = this.options.backdelay;      // input strings of text     this.strings = this.options.strings;      // character number position of current string     this.strpos = 0;      // current array position     this.arraypos = 0;      // current string based on current values[] array position     this.string = this.strings[this.arraypos];      // number stop backspacing on.     // default 0, can change depending on how many chars     // want remove @ time     this.stopnum = 0;      // looping logic     this.loop = this.options.loop;     this.loopcount = this.options.loopcount;     this.curloop = 1;     if (this.loop === false) {         // number in stop going through array         // set strings[] array (length - 1) stop deleting after last string typed         this.stoparray = this.strings.length - 1;     } else {         this.stoparray = this.strings.length;     }      // systems go!     this.build(); }  typed.prototype = {      constructor: typed      ,     init: function () {         // begin loop w/ first current string (global self.string)         // current string passed argument each time after         var self = this;         settimeout(function () {             // start typing             self.typewrite(self.string, self.strpos)         }, self.startdelay);     }      ,     build: function () {         // insert cursor         //this.el.after("<span id=\"typed-cursor\">|</span>");         this.init();     }      // pass current string state each function     ,     typewrite: function (curstring, curstrpos) {          // varying values settimeout during typing         // can't global since number changes each time loop executed         var humanize = math.round(math.random() * (100 - 30)) + this.typespeed;         var self = this;          // ------------- optional ------------- //         // backpaces string faster         // ------------------------------------ //         // if (self.arraypos == 1){         //  self.backdelay = 50;         // }         // else{ self.backdelay = 500; }          // containg entire typing function in timeout         settimeout(function () {              // make sure array position less array length             if (self.arraypos < self.strings.length) {                  // start typing each new char existing string                 // curstring function arg                 // custom placeholder text                 self.el.attr("placeholder", curstring.substr(0, curstrpos));                  // check if current character number string's length                 // , if current array position less stopping point                 // if so, backspace after backdelay setting                 if (curstrpos > curstring.length && self.arraypos < self.stoparray) {                     cleartimeout(clear);                     var clear = settimeout(function () {                         self.backspace(curstring, curstrpos);                     }, self.backdelay);                 }                  // else, keep typing                 else {                     // add characters 1 one                     curstrpos++;                     // loop function                     self.typewrite(curstring, curstrpos);                     // if array position @ stopping position                     // finish code, on next task                     if (self.loop === false) {                         if (self.arraypos === self.stoparray && curstrpos === curstring.length) {                             // animation occurs on last typed string                             // fires callback function                             var clear = self.options.callback();                             cleartimeout(clear);                         }                     }                 }             }             // if array position greater array length             // , looping active, reset array pos , start over.             else if (self.loop === true && self.loopcount === false) {                 self.arraypos = 0;                 self.init();             } else if (self.loopcount !== false && self.curloop < self.loopcount) {                 self.arraypos = 0;                 self.curloop = self.curloop + 1;                 self.init();             }              // humanized value typing         }, humanize);      }      ,     backspace: function (curstring, curstrpos) {          // varying values settimeout during typing         // can't global since number changes each time loop executed         var humanize = math.round(math.random() * (100 - 30)) + this.typespeed;         var self = this;          settimeout(function () {              // ----- part optional ----- //             // check string array position             // on first string, delete 1 word             // stopnum represents amount of chars             // keep in current string. in case it's 14.             // if (self.arraypos == 1){             //  self.stopnum = 14;             // }             //every other time, delete whole typed string             // else{             //  self.stopnum = 0;             // }              // ----- continue important stuff ----- //             // replace text current text + typed characters             // custom placeholder text             self.el.attr("placeholder", curstring.substr(0, curstrpos));              // if number (id of character in current string)             // less stop number, keep going             if (curstrpos > self.stopnum) {                 // subtract characters 1 one                 curstrpos--;                 // loop function                 self.backspace(curstring, curstrpos);             }             // if stop number has been reached, increase             // array position next string             else if (curstrpos <= self.stopnum) {                 cleartimeout(clear);                 var clear = self.arraypos = self.arraypos + 1;                 // must pass new array position in instance                 // instead of using global arraypos                 self.typewrite(self.strings[self.arraypos], curstrpos);             }              // humanized value typing         }, humanize);      }  }  $.fn.typed = function (option) {     return this.each(function () {         var $this = $(this),             data = $this.data('typed'),             options = typeof option == 'object' && option         if (!data) $this.data('typed', (data = new typed(this, options)))         if (typeof option == 'string') data[option]()     }); }  $.fn.typed.defaults = {     strings: ["these default values...", "you know should do?", "use own!", "have great day!"],     // typing , backspacing speed     typespeed: 0,     // time before typing starts     startdelay: 0,     // time before backspacing     backdelay: 500,     // loop     loop: false,     // false = infinite     loopcount: false,     // ending callback function     callback: function () {         null     } }   }(window.jquery); ////////////////////// code ////////////////////// $(function () {  $("#typed").typed({     strings: ["testing................................."],     typespeed: 200,     // show cursor     showcursor: true,     // character cursor     cursorchar: "|",     attr: 'placeholder',     backdelay: 500,     loop: false,     contenttype: 'html', // or text     // defaults false infinite loop     loopcount: false,     callback: function () {         foo();     },     resetcallback: function () {         newtyped();     } });  $(".reset").click(function () {     $("#typed").typed('reset'); });  }); 

jsfiddle: http://jsfiddle.net/cv5lf9l0/4/

edit: i've found if replace input tag "span id=..." tag caret blinks no text appears.

it's easy, , don't need css animation. add empty string quotation marks, this: ,""

go code section:

////////////////////// code ////////////////////// //-rem0ve in here- 

and replace this:

////////////////////// code //////////////////////   $(function(){   $("#typed").typed({   strings: ["have a","beautiful day, ""],   typespeed: 23   });     $(".reset").click(function () {         $("#typed").typed('reset');     }); }); 

updated fiddle: http://jsfiddle.net/cv5lf9l0/10/