<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple input</title> <script type="text/javascript"> function setup_event_listener() { var elem = document.getElementById('qute-input-existing'); console.log(elem); elem.addEventListener('input', function() { console.log("contents: " + elem.value); }); } </script> </head> <body onload="setup_event_listener()"> <form><input id="qute-input"></input></form> With padding: <form><input type="text" style="padding-left: 20px;"></input></form> With existing text (logs to JS):: <form><input id="qute-input-existing" value="existing"></input></form> </body> </html>