https://auth.me.com/authenticate
この Web サイトでは、メール アドレスを入力すると、メール アドレスがボックス サイズを埋めると、自動的にフォント サイズが縮小されます。
Javascript を使用して同じことを行うにはどうすればよいでしょうか。
発生/キャプチャされているイベントはどれですか?
https://auth.me.com/authenticate
この Web サイトでは、メール アドレスを入力すると、メール アドレスがボックス サイズを埋めると、自動的にフォント サイズが縮小されます。
Javascript を使用して同じことを行うにはどうすればよいでしょうか。
発生/キャプチャされているイベントはどれですか?
$("input").keypress(function(){
if(this.value.length>43)//or some other value
{//do stuff here
}
});
キーダウンはあなたが探しているものです
、という名前のライブラリを作成しました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,'&').replace(/</g,'<').replace(/>/g,'>').replace(/ /g," ");
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
いくつかのアドバイス:
私はあなたのためにコードを作成しました。たとえば、自分の 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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/ {2,}/g, function(spaces) {
// Change the spaces to $nbsp; except the last one
for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) {
fakeSpaces += ' '
}
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です。
はい、@誰かが困っていることは、彼らがここでしていることだと思います。
ボックスに収まる文字数を計算します。テキストボックスの幅はわかっています。ここで指定されているフォントサイズとパディングを知っています。したがって、オーバーフローする前にテキストボックスに入力できる文字数がわかります(正確ではありません)。
または、ランダムな文字を入力して、いくつ収まるかを確認することもできます。:)
時間があれば、電子メール アドレスのテキスト ボックスをキーダウンしたときに発生するイベントに飛び込むこともできます。あなたはたくさん学ぶでしょう!
JavaScript を使用して、既に入力された文字数をカウントし ( .change()
jQuery ではそうだと思います)、それに応じてフォントサイズを変更する必要があります。