输入宽度自动（根据内容长度自动调整大小）答案

【问题标题】：Input width auto (autoresized based on content length)输入宽度自动（根据内容长度自动调整大小）
【发布时间】：2023-04-03 09:02:01
【问题描述】：

我正在尝试使输入自动调整大小以适应内容（不大于或小于所需）

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 中是这样，

知道为什么吗？

【问题讨论】：

我认为这个宽度是我们使用input标签时得到的最小值
所以只有css没有解决方法？
可以使用size属性：jsfiddle.net/p3cwwvow?
@nevermind 我明白了，问题是这样他们也不会调整大小，就像设置固定宽度一样。jsfiddle.net/p3cwwvow/3
是的，但是，我 99% 确信在这种情况下纯 css 解决方案是不可能的，如果你想自动调整与内容相关的大小，你将需要 javascript....

标签： css input width

【解决方案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>

【讨论】：

【解决方案2】：

你有活生生的例子吗？

这应该能够使用 CSS 而不是使用 JS 来完成，但需要能够检查其余代码以确保它适合并正常工作

【讨论】：

是点击问题“运行代码sn-p”bue按钮的sn-p
顺便说一句，这应该是一个评论，而不是一个答案（还......）