動態調整輸入大小

我只是想知道如何在輸入時動態調整輸入大小？動態調整輸入大小

我想盡可能使用jQuery &我寧願它是一個比笨重的插件小的腳本。

請讓我知道，馬特·穆勒

來源

2009-09-25 Matt

-1

我發現這個輕量級的一個。這是文字區域

jQuery plugin: ‘autoResize’

完整版：〜4K

縮小的：〜1K

來源

2009-09-25 04:06:46 rahul

你也可以只是初始化它我需要它的投入不是文字區域。我也檢查了一個。它看起來像基於它重新調整了多少次你打回來..這是行不通的。我希望當它到達輸入框的末尾時調整它的大小。 – Matt 2009-09-25 15:33:30

該鏈接不再有效......它返回一個404頁面。 – 2012-09-05 12:27:02

這裏有一個快速（未經測試）解決方案

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

來源

2010-05-05 13:34:13 czarchaic

我會給你一個去，讓你知道。謝謝！ – Matt 2010-05-07 03:39:10

我只是試過這個，它的工作原理。但要確保你不超過CSS的大小，否則它將無法工作。 – Serrano 2012-08-11 18:36:12

請注意，如果您使用可變寬度字體，則會增加太多空間。嘗試在字段中輸入「iiiiiiiii」以進行測試。 – Mark 2013-02-07 21:11:48

我上有一個jQuery插件GitHub：https://github.com/MartinF/jQuery.Autosize.Input

縮小約1.6 kb。

這裏你可以看到一個活生生的例子：http://jsfiddle.net/mJMpw/6/

例子：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' /> 

input[type="data-autosize-input"] { 
    width: 90px; 
    min-width: 90px; 
    max-width: 300px; 
    transition: width 0.25s;  
}

你只需要使用CSS來設置最小/最大寬度，如果你想有一個不錯的效果使用的寬度的過渡。

您可以將輸入元素的data-autosize-input屬性的空格/距離指定爲json符號中的值。

當然使用jQuery

$("selector").autosizeInput();

來源

2013-06-13 23:27:39 MartinF

動態調整輸入大小

回答

相關問題