输入时实时更改 <p>答案

【问题标题】：Change <p> live while typing输入时实时更改 <p>
【发布时间】：2012-10-31 19:34:00
【问题描述】：

我正在在线创建一个字体测试器。我需要人们在文本输入中键入并以所需字体获取他们的文本，我正在使用字体进行更改。我将使用 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);
});

另外，有什么东西可以保护字体不被下载吗？

【问题讨论】：

【解决方案1】：

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

完整代码：

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

演示： http://jsfiddle.net/VeGCy/3/

【讨论】：

【解决方案2】：

另外，有什么东西可以保护字体不被下载吗？

不幸的是，没有。一种解决方法是使用诸如 Cufon 或 Sifr 之类的东西来通过 Flash 转换您的文本。

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

【讨论】：

字体都是由我或与我一起工作的人创建的。我将字体松鼠用于网络魔术。也许某种实时的服务器端转换为图像？
如果您要使用图像，我不会费心使用过于复杂的东西来创建动态图像。相反，在 Photoshop 或您选择的图像编辑器中为您的每种字体创建漂亮的图像，并使用包含字母表所有字符的短语，并输入您的字体支持的任何数字或特殊字符。这将使您能够最大程度地控制字体文件，同时仍允许用户查看您的字体如何呈现字母表中的每个字母。

【解决方案3】：

您需要使用# 而不是.。 # 是 id 选择器。 . 是类选择器。

您也可以考虑使用keydown() 而不是change()，这样文本会实时更新，而不仅仅是当他们点击离开input 时。

【讨论】：

【解决方案4】：

我注意到我的#viewer 在使用keydown 时落后了一个按键。我使用keyup 方法解决了这个问题

完整代码：

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

演示： http://jsfiddle.net/VeGCy/9/

【讨论】：