1

我有一个 HTML 页面，其中包含一个包含只读文本框的 div 网格，每个文本框都包含一个通过 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";   }

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

4

4 回答 4

1 
div2.value.fontSize="10px";

这不起作用；您需要访问fontSizeusing style：

div2.style.fontSize="10px";
于 2013-06-10T20:22:56.267 回答
1

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

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

如果要更改它们的字体/文本样式，则必须以表单元素本身为目标。而不是针对您的包装器 div （我猜您是通过您给您的变量的名称来做的， div2 没有在您的代码段中设置），您应该直接针对输入。

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

于 2013-06-10T21:08:23.680 回答
0

你有没有看过http://fittextjs.com/它就是这样做的。我不是“向它扔 jquery”的人群的粉丝，但它可以完成这项工作并且它是开源的，所以如果你想了解更多信息，如果你想要一个纯 JS 解决方案，你可以四处逛逛。在这种情况下，为什么要重新发明轮子:)

于 2013-06-10T20:21:18.120 回答
0

做这个...

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; }

JSF中：

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

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

于 2013-06-10T21:10:55.473 回答