MobileMe如何动态缩放其用户名登录字段的字体大小？

Question

我注意到，当登录到www.me.com时，当您点击输入字段的末尾时，用户名输入字段会缩小字体。它非常准确，几乎可以检测到字符宽度，所以它不是字符计数。它甚至可以处理unicode字符。你知道它是怎么做的吗？

Answer 1

它们：

1. 将用户名输入的值放在页面外的跨度元素中
2. 使跨度元素具有与输入相同的字体大小如果跨度的宽度大于输入元素的可用宽度，则获取跨度的宽度
3. ，并相应地更新字体大小

Answer 2

有人在这里问了非常类似的问题：How to resize text in a textbox if it is too large till a certain size

所以我做了一个小的库，它允许写：

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

看这里：https://stackoverflow.com/a/11164769/1344937