jQuery .keyup이 외부 객체 태그와 함께 작동하지 않습니다.

입력 상자에 텍스트를 입력하고 입력 할 때 특정 영역에 표시해야합니다. 여기서 SVG를 사용하고 있지만 SVG에는 배치가 없기 때문에 HTML의 자동 배치에 액세스 할 때 외부 객체 태그를 사용해야한다는 정보를 받았습니다. 그러나 그렇게하면 내 키 업 기능이 더 이상 작동하지 않습니다. 다음은 입력 코드입니다. 아니면 바이올린 - http://jsfiddle.net/ytktmo00/jQuery .keyup이 외부 객체 태그와 함께 작동하지 않습니다.

 <h3>Your Text:</h3> 
     <input id="input" maxlength="30" type="text" name="Text" value="Max. 30 characters">

그리고 이것은 SVG 버전 단어를 잘 외에 포장 문제입니다.

<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>

SVG에 주석을 달고 이물질의 주석을 제거하면 다음과 같습니다.

<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>

그리고 모두를위한 jQuery를

...

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

감사합니다. 그것이 어디에서 사용되고 있는지 알고 싶다면 웹 사이트는 here입니다. 자바 스크립트

출처

2014-09-23 thinkrite

예 (효과를보고 몇 초를 기다려야)이 당신의 예를 단지 HTML이 아닌 실제 SVG 그래서 널 네임 스페이스

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 about that 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 a 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);

출처

2014-09-23 09:07:58

에는 createElementNS 알 수없는 요소를 만듭니다. SVG 요소는 svg 네임 스페이스에 만들어야합니다. –

@RobertLongson,주의 해 주셔서 감사합니다. –

나는 이것을 어떻게 처리해야하는지 잘 모르겠습니다. 관련성이없는 것처럼 보입니다. – thinkrite

jQuery .keyup이 외부 객체 태그와 함께 작동하지 않습니다.

답변

관련 문제