Question

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

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

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwxxxxx

太宽了：

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

任何帮助将不胜感激

Answer 1

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

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

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

Answer 2

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

Answer 3

你可以有这样的东西

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

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

WORKING DEMO

Answer 4

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

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

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

HTML：如何调整禁用的INPUT的宽度

4 个答案: