Jump to content

Text appearance on a page as typed in right now and deleted again?


Christ-grace
 Share

Recommended Posts

Hi 🙂 

I want text (quotes) to appear on a page as if it is typed in right now, and then deleted by the backspace key, followed by another text typed in. Like seen on https://iatl.co/ A leader is 

How is this called in tech language? Or can you find me a correspondent article on www.w3schools.com or another trustful source so I can implement it as html-code?

Happy about clear and competent help.

Greetings, Klaus

Link to comment
Share on other sites

There is no specific name for that, but you can do it in Javascript with a combination of string manipulation functions and timing functions.

In the programming world, most things are not done right out of the box and you often have to solve completely new problems on your own. This is why it is important to learn all the basics of programming which gives you the puzzle pieces you can fit together in different ways to solve any problem. This is not too difficult of a task to achieve once you are familiar with Javascript and the DOM.

Link to comment
Share on other sites

You would need to learn to separate each character within a string using split(), into an array. Then loop through each using incrementing index ref and setInterval() which would output each character as though someone was typing. The next stage would involve removing 1 character at a time from the string using slice(0,-1) again using a setInterval() as above.

If you want replace string with another? then you would need to store each string in an array.

required leaning

arrays

split();

slice();

setInterval();

clearInterval(),

document.getElementById()

if and else

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...