2014-03-24 69 views
0

我有一個數字輸入字段。我想從最小寬度開始,以便輸入符合默認值-1。當值減少到-100,-1,000等或增加時,我想調整輸入寬度,以便整個字段可見。Twitter Bootstrap:調整數字輸入的大小以適應內容變化

<div class="col-lg-4 input-group "> 
    <span class="input-group-addon">$</span> 
    <input name="childPrice" id="childPrice" type="number" step=".25" value="-1" min="-99999" max="-1" class="form-control" onchange="$(this).attr('size', $(this).val().length);" size="9"> 
    <span class="input-group-addon">/ticket</span> 
</div> 
+0

你的方法工作,如果你使用類型=「文本」,但我猜你要使用的號碼。 – Mathias

回答

1

最簡單的方法是使用等寬字體,然後預先計算的一個字符的寬度,然後在其上將取決於它多少個字符需要動態設置其寬度將字段添加的改變處理程序包含。

稍微難一些的方法是,還要有一個更改處理程序,它將取文本字段的值,使用它創建與display: none分離的節點,將其插入DOM,測量其寬度,然後使用該值動態調整字段大小。

這裏是概念上的jsfiddle證明 - http://jsfiddle.net/tonicboy/uVJ6L/

JS:

$('#my-text').on('keyup', function(ev){ 
    var field = $(ev.currentTarget), 
     origWidth = field.outerWidth(), 
     width = 0, 
     val = field.val(), 
     tmp = $('<p style="display:none;">' + val + '</p>'); 

    $('body').append(tmp); 
    width = tmp.outerWidth(); 
    tmp.remove(); 
    if (width > origWidth) 
     field.css('width', width); 
}); 
+0

我的想法是想出以下幾點:http://jsfiddle.net/uVJ6L/2/ – TylersSN

+0

是的,大部分工作正常,但我確實遇到了一些問題。首先,'變化'事件只有在離開(模糊)該場時纔會發射一次。我不確定這是你想要的,還是你希望它在輸入時不斷擴展,在這種情況下,你需要'keyup'事件。另一件事是它假定每個字符的寬度爲15,這並不嚴格準確。 –

+0

我認爲你錯過了我正在使用的數字輸入類型。你說得對,我確實需要用戶輸入輸入時的按鍵事件。但我原來的邏輯只考慮使用向上和向下箭頭來改變字段。只要按住或點擊按鈕,更改就會觸發。 – TylersSN

相關問題