<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。
<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。
当前回答
我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度,例如:
input {
width: 30%;
min-width: 200px;
}
这将把输入元素的最小宽度设置为200像素。在这里,“px”代表“像素”。
现在,如果您试图在用户提交输入字段时确保输入字段至少包含一个字符,则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的,我会编辑这个答案,尽我最大的努力帮助你。
其他回答
我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度,例如:
input {
width: 30%;
min-width: 200px;
}
这将把输入元素的最小宽度设置为200像素。在这里,“px”代表“像素”。
现在,如果您试图在用户提交输入字段时确保输入字段至少包含一个字符,则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的,我会编辑这个答案,尽我最大的努力帮助你。
我只是花了些时间来弄清楚怎么做。 实际上,我发现的最简单的方法是将输入值移动到span之前的输入,保持输入1个符号宽度。虽然我不确定它是否适合你最初的需求。 也许它需要一些额外的代码,但在react+flux的应用程序中,这是非常自然的解决方案。
你可以这样做
// 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();
});
});
这是我的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;
}
演进版:
<input type="text" style="width: {tag.length}ch" bind:value={tag} />