1 
<input type="text" name="email" size="some size" disabled="true/false">

表单允许我提供最多 35 个字符长的 ID，它在编辑模式下是只读的（在这种情况下呈现为禁用）。如何根据文本长度确定其宽度？我希望能够显示足够宽的字段，以便显示整个文本。尝试使用 size 属性，但它几乎没用，因为它没有考虑字体宽度。喜欢它的缩小范围：

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwxxxxxx

太宽了：

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

任何帮助将不胜感激

4

4 回答 4

2

如果您想考虑每个字母的宽度，那么您可以使用等宽字体。等宽字体的所有字符宽度相等：

input[type="text"] {
    font-family:monospace;
}

http://jsfiddle.net/JamesD/q7NRb/

于 2013-07-31T09:46:01.220 回答
1

如果您希望输入的宽度来调整其内容的大小，那么您将不得不做一些 js. 一个选项是创建一个具有相同样式的临时跨度，用相同的文本填充它并测量它的大小：

 function UpdateWidth() {
        var input = $('#yourInputId');
        $('<span id="width">').append( input.val() ).appendTo('body');
        input.width( $('#width').width() + 1 );
        $('#width').remove();
    }

请注意，您必须确保跨度具有相同的样式（字体等）。

于 2013-07-31T09:48:09.273 回答
1 
<input type="text" name="email" size="some size" disabled="true/false" onkeypress="Adjustwidth(this);">

您必须借助一些 javascript 来调整控件的宽度，例如...

function Adjustwidth(obj)
{
     obj.style.width = ((obj.value.length + 1) * 8) + 'px';
}
于 2013-07-31T09:45:07.160 回答
1

你可以有这样的东西

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

还添加 Mono-space 字体将处理尾随空格

工作演示

于 2013-07-31T09:47:00.143 回答