Question

我有一个数字输入字段。我想以最小宽度开始，以便输入符合默认值-1。当值减小到-100，-1,000等或增加时，我希望调整输入宽度，以便整个字段可见。

 <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>

Answer 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);
});

Twitter Bootstrap：调整数字输入以适应更改内容

1 个答案: