输入宽度自动（基于内容长度autoresized）

Question

我试图让输入自动调整大小以适应内容（比需要的不是更大或更小）

form { 
 
    white-space:nowrap; 
 
    background: #ddd; 
 
    border: 1px solid #ccc; 
 
    margin:10px; 
 
    padding: 5px; 
 
    display:inline-block; 
 
} 
 

 
input, button { 
 
    display:inline-block; 
 
} 
 

 
input { 
 
    max-width: none; 
 
    min-width: 0; 
 
    width: auto; 
 
    -moz-appearance: none; 
 
}

<form> 
 
    <button>-</button> 
 
    <input type="text" value="0"> minutes 
 
    <button>+</button> 
 
</form> 
 

 
<form> 
 
    <button>-</button> 
 
    <input type="text" value="500"> minutes 
 
    <button>+</button> 
 
</form>

但宽度auto没有按至少在Firefox中，至少在做这个伎俩，

任何想法为什么？

Answer 1

好，

由于我没有看到一个CSS唯一的解决办法，这涉及的JavaScript

（但它交给原来的问题，我想，如果更多钞票不使用JS ..）

的解决方案

$('input').on('change keyup', function() { 
 
    var fontsize = parseInt($(this).css('font-size')); 
 
    var value = $(this).val(); 
 
    var length = value.length; 
 
    $(this).width(fontsize*length)) 
 
});

form { 
 
    white-space:nowrap; 
 
    background: #ddd; 
 
    border: 1px solid #ccc; 
 
    margin:10px; 
 
    padding: 5px; 
 
    display:inline-block; 
 
} 
 

 
input, button { 
 
    display:inline-block; 
 
} 
 

 
input { 
 
    width: 10px; 
 
    padding: 0; 
 
    font-size: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <button>-</button> 
 
    <input type="text" value="0"> minutes 
 
    <button>+</button> 
 
</form>

Answer 2

你有一个活生生的例子？

这应该可以用CSS来实现，而不是使用JS，但需要能够检查代码的剩下的就看，这将适应和正常工作