jquery - 巨大的响应式输入字段文本

Question

我正在尝试制作一个包含大量文本的输入字段。我希望这个文本是最大的，然后相应地缩放，这样长的电子邮件地址就不会离开视野。

这里是一个开发网站。

我正在使用 fittext.js 来尝试实现这一目标。

然而，我觉得我以前在某个地方见过这个，它并不像我想象的那么复杂。

有人有建议吗？

谢谢。

Answer 1

如果您将输入设置为等宽字体，您可以想象在 keyup 事件上放置一个侦听器，获取输入的字符长度，然后计算字体大小应该多小才能使值适合一行。

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/