輸入寬度自動（基於內容長度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，但需要能夠檢查代碼的剩下的就看，這將適應和正常工作