JavaScript控制文本框自动缩小文字填充

发布时间：2018-08-20 04:18 所属栏目：121 来源：站长网

导读：Java Script控制文本框自动缩小文字填充，看标题大家就能明白了，就是指文字在指定大小的文本框input中，实时大小，您可以运行下面的代码查看效果，当我们输入的文字大于文本框的宽度时，文本框内的文字自动缩小，挺有意思吧？一起来看看特效吧！ !DOCTYP

　　JavaScript控制文本框自动缩小文字填充，看标题大家就能明白了，就是指文字在指定大小的文本框input中，实时大小，您可以运行下面的代码查看效果，当我们输入的文字大于文本框的宽度时，文本框内的文字自动缩小，挺有意思吧？

　　一起来看看特效吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>缩小字体填充</title> <style type="text/css"> #cell{ width:100px; height:20px; line-height:20px; border:1px #000 solid; white-space:nowrap; overflow:visible; margin:20px;} </style> </head> <body> 请输入文字信息：<input id="ipt" onkeyup="update()" type="text" /> <div id="cell"></div> <script type="text/javascript"> function update(){ var str=document.getElementById('ipt').value; document.getElementById('cell').innerHTML=str; document.getElementById('cell').style.fontSize="16px"; autofs(document.getElementById('cell')); } function autofs(o){ var fs=o.style.fontSize; fs=Number(fs.replace("px","")); var sw=o.scrollWidth; var ow=o.offsetWidth; if(sw>ow && fs>1){ fs--; o.style.fontSize=fs+"px"; autofs(o);} } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）