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不能與我的外來對象標籤一起工作

回答

相關問題