jquery - 変化するタイピングしながら生きる

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

デモ: http://jsfiddle.net/VeGCy/3/

Answer 2

また、font-faceがダウンロードされないように保護するものはありますか?

残念ながらありません。回避策は、フラッシュ経由でテキストを変換する Cufon や Sifr などを使用することです。

ライセンスの問題が心配な場合は、www.google.com/webfontsも参照してください。

Answer 3

#の代わりに使用する必要があります.。#IDセレクターです。.クラスセレクターです。

keydown()の代わりに を使用することを検討することもできます。change()これにより、テキストが をクリックしたときだけでなく、リアルタイムで更新されますinput。

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

Answer 4

#viewerを使用しているときに、キーストロークが 1 つ遅れていることに気付きましたkeydown。keyupメソッドを使用してこれを修正しました

フルコード:

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

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