<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码，它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充，这就是问题所在，第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度，那么整个程序就会很混乱，我需要1px的宽度，只在需要的时候才需要。
当前回答
更新答案https://stackoverflow.com/a/41389961/1022684
如果你有多个输入并且不想重复输入文本:
$(() => {
$('.container input').on('input', (e) => {
$(e.target).prev().text($(e.target).val())
})
$('.container input').each((idx, elem) => {
$(elem).prev().text($(elem).val())
})
})
其他回答
我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度，例如:
input {
width: 30%;
min-width: 200px;
}
这将把输入元素的最小宽度设置为200像素。在这里，“px”代表“像素”。
现在，如果您试图在用户提交输入字段时确保输入字段至少包含一个字符，则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的，我会编辑这个答案，尽我最大的努力帮助你。
你可以这样做
// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
$('#input').keyup(function(){
$('<span id="width">').append( $(this).val() ).appendTo('body');
$(this).width( $('#width').width() + 2 );
$('#width').remove();
});
});
下面是一个简单的函数来获取所需的内容:
function resizeInput() {
const input = document.getElementById('myInput');
input.style.width = `${input.scrollWidth}px`;
};
这是我的React解决方案，它适用于任何字体大小，只要确保你有一个monospace字体(所有字体字符宽度在monospace字体上是相同的)，就像我在我的解决方案，它将完美地工作。
JS:
const [value, setValue] = useState(0)
HTML:
<input value={value} onChange={(e) => {setValue(e.target.value)}} style={{width: `${value.toString().length}`ch}}/>
CSS:
@import url("https://fonts.googleapis.com/css2?family=B612+Mono&display=swap");
input{
font-family: "B612 Mono", monospace;
}
听起来好像您希望样式根据文本框的内容动态地应用于文本框的宽度。如果是这样的话，你将需要一些js来运行文本框内容的变化，就像这样:
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
注意:这个解决方案只适用于每个字符都是8px宽的情况。您可以使用CSS-Unit“ch”(字符)，它表示所选字体中字符“0”的宽度。你可以在这里阅读。
