Question

我有一个带有div的网格的HTML页面，其中包含只读文本框，每个文本框都包含一个通过php脚本动态更改的字符串。我一直在研究一个javascript函数来检测字符串长度并相应地调整字符串的大小，以便它完全适合文本框中没有溢出。

这是我的div的一个例子......

<a  href='http://burstu.com'>
  <div id='toprightlefthigh' class='resize'>
    <input type="text" id="toprightlefthighbox" class="idea" value="" readonly>
  </div>
</a>

我尝试过各种各样的剧本，而我最接近的就是这个......

var div2length = div2.value.length;   if(div2length <=50) {
div2.value.fontSize="10px";   }

但没有这样的运气。有任何想法吗？

Answer 1

div2.value.fontSize="10px";

这不起作用;您需要使用fontSize访问style：

div2.style.fontSize="10px";

Answer 2

您是否知道font-size不是由表单元素继承的？

默认情况下，浏览器使用操作系统控件或浏览器控件呈现大多数表单元素（textareas，文本框，按钮等）。因此，大多数字体属性都取自操作系统当前使用的主题。

如果要更改字体/文本样式，则必须自己定位表单元素。而不是瞄准你的包装器div（我猜你是按照你给你的名字改变的，你的代码片段中没有设置div2），你应该直接定位输入。

@andrewGibson也是对的，你应该使用style属性。

Answer 3

你有没有看过http://fittextjs.com/它就是这么做的。我不喜欢“扔jquery at it”的人群，但是那个人可以完成工作和它的开源，所以如果你想要了解更多，如果你是在追求纯粹的JS解决方案，那么你可以有所帮助。在这种情况下，为什么重新发明轮子:)）

Answer 4

这样做......

HTML：

<input type="text" id="toprightlefthighbox" class="idea" value="" />

使用Javascript：

var MAX_FONT = 20;
var MIN_FONT = 10;
var YOUR_STRING = "Here is my long long long long string";

var textbox = document.getElementById("toprightlefthighbox");
var fontSize = MAX_FONT + 1;
var element = document.createElement("div");

element.style.visibility = "hidden";
element.style.display = "inline-block";
element.style.padding = "0px";
element.style.fontFamily = "Arial";
element.innerHTML = YOUR_STRING;
document.body.appendChild(element);

do 
{
    fontSize -= 1; //maybe -= 0.5 in some browsers? Just change the +1 above too
    element.style.fontSize = fontSize + "px";
} while (fontSize > MIN_FONT && element.clientWidth > textbox.clientWidth);

document.body.removeChild(element);
element = null;

textbox.value = YOUR_STRING;
textbox.style.fontSize = fontSize + "px";

使用CSS：

#toprightlefthighbox { width: 205px; height: 25px; font-family: arial; }

的jsfiddle：

http://jsfiddle.net/hkN35/4/

请注意，当您将文本框的宽度减小到200像素时，它会使字体大小减小。

使用javascript调整动态生成的字符串的大小？

4 个答案: