如果文本框中的文本太大而直到某个大小，则如何调整其大小

https://auth.me.com/authenticate

在您输入电子邮件地址时，在此网站上，如果电子邮件地址填写框大小，则会自动减小字体大小。

• 我们怎么能用Javascript做同样的事情？

• 哪些是被解雇/被捕获的事件？

Answer 1

我创建了一个名为resize.js的库，它允许写：

---

这是图书馆：

 var precision=18; window.onload=function() { for(var i=0,t=document.getElementsByTagName("input"),l=t.length;i/g,'>').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(testel.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为默认文本框，但如果你修改文本框的样式，你可能会有将变量修改为更好的值（通过测试）。
• 我不保证网站上的resize.js主机就像在小提琴中一样，你应该将源代码复制到一个新文件中并保存。

Answer 2

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

Keydown是您正在寻找的

Answer 3

我已经为你制作了代码，例如我在我自己的网站上为联系表单做的事情：如果有很多文本， 会变得更高。

要做的是创建一个不可见的

，对于中的每个keydown ，获取其内容并将其放入

，并检查其width是否大于的一个。

HTML

 
  
 
​ 

我们为和

设置相同字体大小的CSS并隐藏

（ 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(/ {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 。

Answer 4

您必须使用JavaScript来计算已输入的字符数（我相信jQuery中的.change() ）并相应地更改字体大小。

Answer 5

是的，我认为@somebody遇到麻烦的是他们在这里做的事情。

• 计算框中适合的字母数 – 您知道文本框的宽度。 你知道这里给出的字体大小和填充。 所以你知道在文本框溢出之前可以输入多少个字母（不完全一样）。

• 或者你可以输入随机字母，看看有多少可以适合！ 🙂

• 好吧，如果你有时间，你也可以深入了解当你在电子邮件地址文本框上打字时被解雇的事件。 你会学到很多东西！