HTML文本輸入大小

我有一個JavaScript動態創建的文本輸入，我也用JavaScript放一些文本。我想使文字輸入大小可變，取決於文本的長度，並用70％HTML文本輸入大小

對於最大寬度，我使用：

'<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時，textarea將只有106個字符長度，我不知道爲什麼。任何幫助和建議將非常可觀。

謝謝。

來源

2012-09-05 Miloš

是什麼？「大小」字符長度？像素高度？像素寬度？爲什麼在'input'元素的屬性之間有那麼多';'？ –

@AaronDigulla html中的attribut大小是以字符爲單位的長度。 –

@Milos：看到我下面給出的答案。 –

的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

來源

2012-09-05 12:41:31

謝謝A.K.事實上，我不需要緩存keyup，因爲我使用javascript填充文本輸入。 –

當你輸入很長的數字時，第一個數字開始向左移動，而不是理想的解決方案。 – Abadaba

刪除樣式屬性，那麼試試這個：

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

確保沒有CSS樣式覆蓋的寬度。得到了這裏的答案：Dynamically resize input

來源

2012-09-05 12:23:23 jackson5

謝謝你的答案，但我只想使用JavaScript和HTML，沒有JQuerry。 –

@Milos：用javascript解決方案查看我的答案。 –

HTML文本輸入大小

回答

相關問題