键入</p>时更改<p>直播

Question

我正在线创建一个字体测试器。我需要人们输入一个文本输入，并用我想要的字体改变所需的字体。我将使用addClass（）更改字体。

HTML

<p id="viewer"></p>
<input type="text" name="texto" id="texto" value="123" />​

的jQuery

$('.texto').change( function(){    
    var str = $('.texto').val();
    $("p").text(str);
});​

这是jsFiddle

另外，有没有什么可以保护font-face不被下载？

Answer 1

将$('.texto')更改为$('#texto')

完整代码：

$('#texto').change( function(){    
    var str = $(this).val();
    $("#viewer").text(str);
});

DEMO： http://jsfiddle.net/VeGCy/3/

Answer 2

  

另外，有没有什么可以保护font-face不被下载？

不幸的是没有。解决方法是使用Cufon或Sifr之类的东西，通过flash转换文本。

如果您担心许可问题，您可能也会对www.google.com/webfonts感兴趣。

Answer 3

您需要使用#代替.。 #是id选择器。 .是类选择器。

您也可以考虑使用keydown()代替change()，以便文本实时更新，而不仅仅是在他们点击input时。

http://jsfiddle.net/VeGCy/9/

Answer 4

我注意到使用#viewer时我的keydown在一次击键时落后了。我使用keyup方法

修复了此问题

完整代码：

$('#texto').keyup(function(){
  var str = $(this).val();
  $("p").text(str);
});

DEMO： http://jsfiddle.net/VeGCy/9/