0

https://auth.me.com/authenticate

この Web サイトでは、メール アドレスを入力すると、メール アドレスがボックス サイズを埋めると、自動的にフォント サイズが縮小されます。

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

  • Javascript を使用して同じことを行うにはどうすればよいでしょうか。

  • 発生/キャプチャされているイベントはどれですか?

4

5 に答える 5

2
$("input").keypress(function(){
if(this.value.length>43)//or some other value
{//do stuff here
}
});

キーダウンはあなたが探しているものです

于 2012-06-17T14:43:42.037 に答える
1

、という名前のライブラリを作成しましたresize.js。これにより、次のように記述できます。

<input type="text" resize="true" />

これはライブラリです:

var precision=18;

window.onload=function()
{
    for(var i=0,t=document.getElementsByTagName("input"),l=t.length;i<l;i++)if(t[i].getAttribute("resize")==="true")
    {
        var div=document.createElement("div");
        div.setAttribute("style","font-size"+parseInt(t[i].s("font-size"))+";font-family:"+t[i].s("font-family")+";position:absolute;top:-10000px;left:-10000px;");
        document.body.appendChild(div);
        (function(i,div,min,max,dif,l,r,w,h,pre){setInterval(function(){modify(t[i],div,min,max,dif,l,r,w,h,pre);},100);})
        (
            i,
            div,
            t[i].getAttribute("min")||parseInt(t[i].s("font-size"))-3,
            t[i].getAttribute("max")||parseInt(t[i].s("font-size")),
            parseInt(t[i].s("padding-left"))+parseInt(t[i].s("padding-right"))+parseInt(t[i].s("border-left-width"))+parseInt(t[i].s("border-right-width"))+precision,
            parseInt(t[i].s("padding-left")),
            parseInt(t[i].s("padding-right")),
            t[i].offsetWidth,
            t[i].offsetHeight,
            precision
        );
    }
}
Object.prototype.s=function(p)
{
    return this.currentStyle?this.currentStyle[p]:document.defaultView.getComputedStyle(this,null).getPropertyValue(p);
}
function modify(el,c,min,max,dif,l,r,w,h,pre)
{
    el.style.width=w+"px";
    el.style.height=h+"px";
    c.innerHTML=el.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/ /g,"&nbsp");
    var test=c.offsetWidth;
    while(test>=el.offsetWidth-dif&&parseInt(el.s("font-size"))>min)
    {
        el.style.fontSize=parseInt(el.s("font-size"))-1+"px";
        c.style.fontSize=el.style.fontSize;
        test=c.offsetWidth;
    }
    while(test<el.offsetWidth-dif&&parseInt(el.s("font-size"))<max)
    {
        el.style.fontSize=parseInt(el.s("font-size"))+1+"px";
        c.style.fontSize=el.style.fontSize;
        test=c.offsetWidth;
    }
    if(parseInt(el.s("font-size"))===min&&c.offsetWidth>el.offsetWidth-dif)
    {
        el.style.paddingLeft="0px";
        el.style.paddingRight="0px";
    }
    else
    {
        el.style.paddingLeft=l+"px";
        el.style.paddingRight=r+"px";
    }
}

フィドル: http: //jsfiddle.net/mageek/GEp2y/1


いくつかのアドバイス:

  • 属性「resize」がtrue以外の値に等しい場合、または設定されていない場合、テキストボックスは通常のテキストボックスとして動作します。
  • 「max」属性と「min」属性を設定することにより、許可される最大フォントサイズと最小フォントサイズを設定できます。デフォルトでは、最大値は現在のフォントサイズであり、最小値は最大値より3サイズ小さいです。
  • https://auth.me.com/authenticateのように、最小フォントサイズに達したときにスペースを確保するためにパディングを削除するものを追加しました。
  • テキストボックスに依存する変数「precision」(resize.jsの先頭)があります。デフォルトのテキストボックスでは18に設定しましたが、テキストボックスのスタイルを変更すると、次のようになります。 (テストによって)変数をより良い値に変更します。
  • フィドルのようにWebサイトでresize.jsのホストを確認していません。ソースコードを新しいファイルにコピーして、保存する必要があります。
于 2012-06-22T22:09:38.923 に答える
1

私はあなたのためにコードを作成しました。たとえば、自分の Web サイトでコンタクト フォーム用に行ったことを参考にしました<textarea>。テキストが多いと、フォームが高くなります。

やるべきことは、目に見えない を作成し<div>、 のそれぞれについてkeydown<input>そのコンテンツを取得して に入れ、それが のものよりも大きいこと<div>を確認することです。width<input>

HTML

<form>
    <input>
    <div></div>
</form>
​

と に同じフォントサイズを設定し<input><div>を非表示にするCSS <div>(position: absolute幅が必要で、レイアウトを変更したくないため)

form > * {
    font-size: 22px
}

form > input {
    width: 150px;
    font-size: 18px;
}

form > div {
    position: absolute;
    left: -10000px;
}​

そしてJavaScript(ここではjQueryを使用)

var $form = $('form')
  , $input = $('input', $form)
  , $autoResize = $('div', $form)
  , $both = $input.add($autoResize)
  , fontSize = parseInt($input.css('font-size'), 10)

$input.on('keydown', function() {
    $autoResize.html(this.value.replace(/&/g, '&amp;')
                                .replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/ {2,}/g, function(spaces) {
                                    // Change the spaces to $nbsp; except the last one
                                    for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) {
                                        fakeSpaces += '&nbsp;'
                                    }
                                    return fakeSpaces + ' '
                                })
                            )
    // We add 10px to be sure it doesn't stick to the edges
    if ($autoResize.outerWidth() >= $input.outerWidth() - 10) {
        do {
            $both.css('font-size', --fontSize)
        } while ($autoResize.outerWidth() >= $input.outerWidth() && fontSize > 10)
        // 10px is the smallest font-size accepted
        if (fontSize === 10) {
            $input.off('keydown')
        }
    }
})​

これがjsFiddleです。

于 2012-06-17T15:25:13.593 に答える
0

はい、@誰かが困っていることは、彼らがここでしていることだと思います。

  • ボックスに収まる文字数を計算します。テキストボックスの幅はわかっています。ここで指定されているフォントサイズとパディングを知っています。したがって、オーバーフローする前にテキストボックスに入力できる文字数がわかります(正確ではありません)。

  • または、ランダムな文字を入力して、いくつ収まるかを確認することもできます。:)

  • 時間があれば、電子メール アドレスのテキスト ボックスをキーダウンしたときに発生するイベントに飛び込むこともできます。あなたはたくさん学ぶでしょう!

于 2012-06-17T15:00:34.047 に答える
0

JavaScript を使用して、既に入力された文字数をカウントし ( .change()jQuery ではそうだと思います)、それに応じてフォントサイズを変更する必要があります。

于 2012-06-17T14:42:12.037 に答える