home
play_circle_filled
menu
cached
settings_brightness
Run
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <title>HTML oninput Attribute Example</title> <meta charset="utf-8" /> <style> input[type="text"] { width: 230px; height: 30px; background-color: #efffff; font-size: 14pt; color: #000; border-radius: 5px; margin: 5px; } input[type="text"]:hover, input[type="email"]:hover { background-color: #fff; } </style> </head> <body> <h2>HTML oninput Attribute Example</h2> <p>Type something to fire the oninput event and count the total characters.</p> <p id="mypara"></p> Input: <input type="text" name="name" id="name" oninput="myFunction(this)"><br> <script> function myFunction(p) { document.querySelector("#mypara").innerHTML = "Input is: " + p.value.toString() + "<br>Total characters: " + p.value.length; } </script> </body> </html>