How to design a Real-Time Typing feature with Jquery

What is Real-Time typing?

Real time typing is inputting text in an html input field and seeing the output printed inside another element anywhere on our page, all in real time.
This can be useful for social media sites or blogs/articles sites where a user types text and seeing its output in real time. Other common applications for real time typing could be chat and messaging apps.

Now that we understand the idea, let's delve into the code.
Since we will code this in jquery we need to insert the jquery library script inside our head tag: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Then we can write our jquery code. Let's create a new file called index.js

index.js:

function liveWrite() {
    var name; 
    var read = $('[re-read]');
    var write = $('[re-write]');    
    read.on('input', function() {
        name = $(this).val();         
        write.html(name);    
    });
}
liveWrite();

Explanation:

On the first line let's declare a name variable.
Next, e have a variable called read, which is instantiated from the html element with attribute "re-read".
Then another variable called write, which has the same concept as read.
The last line of code enables us to detect input on our "read" html element in real time. We then pull the value (or text in this case) within our read variable and assign it to our first variable called name. We then insert that variable inside the html element "write", where it will consequently be outputted, also in real time.

Now we will implement our jquery code with some html.
We'll create very simple input and an output html elements for this demo.

We can have a textarea element as input and assign it the attribute "re-read".
Then we can have an h2 tag as our output element and assign it the attribute "re-write".

And voila.
As we type inside our textarea, the output will be reflected in real time inside our h2 element. We can then style that h2 element of course, like we want.

HTML Designing With Reactor's Live Writer
Reactor's Live Writer also allows us to simulate a html markup design. This means that we can design an html page using the live writer.
All we need to do is change out output element from h2 to a div, give it a class name so we can style markup inside of it and write our html within this div.
Jquery also helps to make styling of elements apply in real time when we define styles in the style tag (in head section of html document).
Of course, javascript and jquery are also possible to add in our simulated html document.

The possibilities are endless.

Check out the demo in my website:
http://reactor-js.com/advanced.html#sticky3

Thanks for reading and enjoy!

Webstite: https://scorpionedge.com
Email: [e-mail]

If you would like to discover more about Reactor JS, check it out here: http://reactor-js.com