jQuery .keyup不能与我的外来对象标签一起工作

所以我希望用户在输入框中输入文本，并在输入文本时需要在某个区域出现。我在这里使用SVG，但由于SVG没有包装，我被告知我需要使用foreign object标签来访问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。在JavaScript

来源

2014-09-23 thinkrite

例（等待几秒钟，看看效果）：

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用一个空的命名空间创建未知的元素，所以这是在你的例子只是HTML和不实SVG。 SVG元素必须在svg命名空间中创建。 – 2014-09-23 09:09:57

@RobertLongson，感谢您的关注，我纠正了它 – 2014-09-23 09:29:15

我不太确定我应该怎么做。这似乎不相关。 – thinkrite 2014-09-23 10:25:18

jQuery .keyup不能与我的外来对象标签一起工作

回答

相关问题