Question

所以我希望用户在输入框中输入文本，当输入文本时，它需要出现在某个区域。我在这里使用SVG，但由于SVG没有包装，我被告知我需要使用外部对象标签来访问HTML的自动包装。但是，如果我这样做，我的键盘功能不再有效。这是输入代码。或者小提琴 - http://jsfiddle.net/ytktmo00/

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

Answer 1

javascript中的示例（等待几秒才能看到效果）：

＆＃13;

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

＆＃13;

jQuery .keyup不使用我的外部对象标记

1 个答案: