Refresh text on image in html

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

+3
source share
4 answers

Here is another alternative way to use pure javascript.

Add onkeyupto the text box and call the function you provided.

<input type="text" id="tbMain" onkeyup="keyup();">

When you press the up key, it will call function keyup()

See here for more details .

+1
source
textBox.addEventListener('change', function () { ... });

If you want it to appear after the user completes, you can use:

textbox.addEventListener('blur', function () { ... });
+1
source

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

+1
source

Try the onchange () event listener. I think it will work

0
source

All Articles