HTML 文本输入大小答案

【问题标题】：HTML text input sizeHTML 文本输入大小
【发布时间】：2012-08-30 03:49:03
【问题描述】：

我有一个使用 javascript 动态创建的文本输入，我也在其中使用 javascript 放置一些文本。我想让文本输入大小可变，取决于文本长度，最大宽度为 70%

为此，我正在使用：

'<input type="text" style="max-width:70%" name="affiliation"
 id="affiliation'+affiliation_id+'" value="'+article_affiliations[i].name+'"
 size='+article_affiliations[i].name.length+'/>'

当文本超过 68% 时一切正常，但当不长时，文本输入区域小于文本大小。

例如，当文本大小为 118 时，文本区域将只有 106 个字符长度，我不知道为什么。任何帮助和建议都将不胜感激。

谢谢。

【问题讨论】：

什么是“尺寸”？字符长度？像素高度？像素宽度？而input元素的属性之间为什么会有这么多;呢？
@AaronDigulla html中的size属性是字符长度。
@Milos：请参阅下面给出的答案。

标签： javascript html textinput

【解决方案1】：

Javascript：

function incSize(event) {
   var size = event.value.length; 
   event.setAttribute("size", size);
   event.setAttribute("style", "width:auto")    
}

HTML：

<input type="text" name="affiliation" onkeyup="incSize(this)" size="1" />

DEMO

【讨论】：

谢谢 A.K.事实上，我不需要缓存 keyup，因为我也在使用 javascript 填充文本输入。
当您输入很长的数字时，第一个数字开始向左移动，这不是一个理想的解决方案。

【解决方案2】：

删除样式属性然后试试这个：

$('input[type="text"]').keyup(function(){
  $(this).attr({width: 'auto', size: $(this).val().length});
});

确保没有 CSS 样式覆盖宽度。从这里得到答案：Dynamically resize input

【讨论】：

感谢您的回答，但我只想使用 javascript 和 HTML，不使用 JQuerry。
@Milos：使用 javascript 解决方案查看我的答案。