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 回答