I used em tags to write text on the image. I want to provide some functionality, so when the user enters a text field, this text comes through the image. I doubt which event listener should add to the text field so that as soon as the contents of the text field are changed, it can also change the contents of the image. I just need to know if this can be done with an event listener or something more. I know how to change the text in the image, but could not figure out how I should update this text of the image dynamically. Hope is clear with a question
Here is another alternative way to use pure javascript.
Add onkeyupto the text box and call the function you provided.
onkeyup
<input type="text" id="tbMain" onkeyup="keyup();">
When you press the up key, it will call function keyup()
function keyup()
See here for more details .
textBox.addEventListener('change', function () { ... });
If you want it to appear after the user completes, you can use:
textbox.addEventListener('blur', function () { ... });
try the following:
<html> <body> <input type="text" id="submit"/> <em id="toChange" >asd</em> </body> </html>
and jQuery:
$('#submit').change(function() { $('#toChange').text( $('#submit').val()); });
or use jsFiddle
Try the onchange () event listener. I think it will work