How to works with inputs? about typewriterjs HOT 6 CLOSED

@mvanroon thanks for the feedback, I have added two options now called onCreateTextNode and onRemoveNode. You can see below for an example of how to use it with input placeholder.

var input = document.getElementById('input')

var customNodeCreator = function(character) {
  // Add character to input value
  input.placeholder = input.placeholder + character;

  // Return null to skip internal adding of dom node
  return null;
}

var onRemoveNode = function({ character }) {
  if(input.value) {
    // Remove last character
    input.placeholder = input.placeholder.slice(0, -1)
  }
}

var typewriter = new Typewriter(null, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
  onRemoveNode: onRemoveNode,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

from typewriterjs.

The suggestion behavior, how does it work? Can you give some examples?

from typewriterjs.

Please provide more details on how you would like this featured to work. Closing for now.

from typewriterjs.

I believe this person is talking about form elements or placeholders

from typewriterjs.

Would love to apply this to an input's placeholder attribute as well.
Something along the lines of:

new Typewriter('#typewriter', {
  attribute: 'placeholder', // defaults to 'text' or 'innerText'
  strings: ['Hello', 'World'],
  autoStart: true,
});

or

new Typewriter({ // Make first parameter optional?
  strings: ['Hello', 'World'],
  onChange: output => this.input.setAttribute('placeholder', output),
  autoStart: true,
});

I'd up for making a PR. Thoughts?

from typewriterjs.

Curious, will this work with <textarea> too?

from typewriterjs.