html - jQuery .keyup not working with my foreign object tag -


so want user enter text in input box , typed needs appear in area. i'm using svg here svg has no wrapping i've been informed need use foreign object tag access html's automatic wrapping. if keyup function no longer works. here input code. or fiddle - http://jsfiddle.net/ytktmo00/

        <h3>your text:</h3>         <input id="input" maxlength="30" type="text" name="text" value="max. 30 characters"> 

and svg version words besides wrapping issue.

<text class="text" transform="matrix(2.4428 0 0 1.5 624.6 550.5599)" font-family="'comicsansms'" font-size="41.6368">your words here</text> 

if comment svg out , uncomment foreign object it.

    <foreignobject x="78" y="460" width="1100" height="200" style="color:white;text-align:center">        <body xmlns="http://www.w3.org/1999/xhtml">            <p class="text">your words here</p>        </body>     </foreignobject> 

and jquery both...

    $('#input').keyup(function() {        $('.text').html($(this).val());     }); 

thanks. if want see being used website here.

example in javascript (wait few sec see effect):

svg = document.createelementns('http://www.w3.org/2000/svg', 'svg');  svg.setattribute('width', 300);  svg.setattribute('height', 300);  svg.setattributens("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); // not sure line    foreign = document.createelementns('http://www.w3.org/2000/svg', "foreignobject");  foreign.setattribute('x', 0);  foreign.setattribute('y', 0);  foreign.setattribute('width', 300);  foreign.setattribute('height', 300);    body = document.createelement('body');    texte = document.createelement("p");  texte.textcontent = "lorem ipsum dolor sit amet enim. etiam ullamcorper. suspendisse pellentesque dui, non felis. maecenas malesuada elit lectus felis, malesuada ultricies. curabitur et ligula. ut molestie a, ultricies porta urna. vestibulum commodo volutpat a, convallis ac, laoreet enim. phasellus fermentum in, dolor. pellentesque facilisis. nulla imperdiet sit amet magna.";    foreign.appendchild(body);  body.appendchild(texte);  svg.appendchild(foreign);  document.body.appendchild(svg);    settimeout( function() { document.getelementsbytagname('p')[0].textcontent = 'live example'; }, 5000 );


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -