Welcome folks today in this blog post we will be using the oninput
event in html5
input field to get the live
preview of what the user is typing
and showing it inside the browser in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input id="name" oninput="preview()" type="text" placeholder="Enter Name"> <div id="preview"></div> </body> <script> let preview = () => { document.getElementById('preview').innerHTML = document.getElementById('name').value } </script> </html> |
As you can see we have the simple input
field to allow the user to enter the name
and we have attached the oninput
event handler where we are executing the preview()
method to show the live preview of what user is typing. And we have the div
section where we display the preview of the input field. Inside the javascript code we are changing the preview
to the input field value.