jquery - 巨大なレスポンシブ入力フィールド テキスト

Question

巨大なテキストで入力フィールドを作成しようとしています。このテキストを最大サイズにして、それに応じて拡大縮小して、長いメール アドレスが視野から外れないようにしたいと考えています。

HEREは開発サイトです。

これを達成するために fittext.js を使用しています。

しかし、これはどこかで見たような気がして、自分が作っているほど複雑ではありませんでした。

誰かアドバイスはありますか？

ありがとう。

Answer 1

入力を等幅フォントに設定すると、キーアップイベントにリスナーを配置し、入力の文字数で長さを取得してから、値を1行に収めるためにフォントサイズをどれだけ小さくするかを計算できます。

var input = $("input");
input.on("keyup",function(evt){

    var char_count = input.val().length;
    var input_width = input.width();
    var new_font_size = Math.floor( input_width / char_count );
    input.css("fontSize",new_font_size+"px");

});​

このフィドルをチェックしてください。

Answer 2

Fittext は複数回呼び出されることを好まないようです。代わりにこのプラグインを試してください: https://github.com/vxsx/jquery.inputfit.js

次に、次のことができます jQuery('.putin').inputfit();

例: http://jsfiddle.net/BGJjS/