<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码，它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充，这就是问题所在，第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度，那么整个程序就会很混乱，我需要1px的宽度，只在需要的时候才需要。
当前回答
在现代浏览器版本中，CSS单元ch也是可用的。根据我的理解，它是一个与字体无关的单位，其中1ch等于任何给定字体中字符0(零)的宽度。
因此，通过绑定到输入事件，像下面这样简单的东西可以用作resize函数:
var input = document.querySelector('input');//获取输入元素 输入。addEventListener(“输入”,resizeInput);//在"input"事件上绑定"resizeInput"回调 resizeInput.call(输入);//立即调用函数 函数resizeInput() { This.style.width = this.value.length + "ch"; ｝ 输入{字体大小:1.3 em;填充:.5em;｝ < >标签文本 <输入> < / >标签
该示例将输入大小调整为值的长度+ 2个字符。
单位ch的一个潜在问题是，在许多字体(如Helvetica)中，字符“m”的宽度超过字符0的宽度，而字符“i”要窄得多。1ch通常比字符平均宽度宽，根据这篇文章，通常是20-30%左右。
其他回答
要计算当前输入的宽度，您必须将其嵌入到一个临时span元素中，将该元素附加到DOM，使用scrollWidth属性获得计算的宽度(以像素为单位)，然后再次删除span。当然，您必须确保在输入和span元素中使用相同的字体系列、字体大小等。因此，我给他们分配了同一个班。
I attached the function to the keyup event, as on keypress the input character is not yet added to the input value, so that will result in the wrong width. Unfortunately, I don't know how to get rid of the scrolling of the input field (when adding characters to the end of the field); it scrolls, because the character is added and shown before adjustWidthOfInput() is called. And, as said, I can't do this the other way round because then you'll have the value of the input field before the pressed character is inserted. I'll try to solve this issue later.
顺便说一句，我只是在Firefox(3.6.8)中测试了这个，但我希望你能明白。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get/set width of <input></title>
<style>
body {
background: #666;
}
.input-element {
border: 0;
padding: 2px;
background: #fff;
font: 12pt sans-serif;
}
.tmp-element {
visibility: hidden;
white-space: pre;
}
</style>
</head>
<body>
<input id="theInput" type="text" class="input-element" value="1">
<script>
var inputEl = document.getElementById("theInput");
function getWidthOfInput() {
var tmp = document.createElement("span");
tmp.className = "input-element tmp-element";
tmp.innerHTML = inputEl.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
document.body.appendChild(tmp);
var theWidth = tmp.getBoundingClientRect().width;
document.body.removeChild(tmp);
return theWidth;
}
function adjustWidthOfInput() {
inputEl.style.width = getWidthOfInput() + "px";
}
adjustWidthOfInput();
inputEl.onkeyup = adjustWidthOfInput;
</script>
</body>
</html>
我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度，例如:
input {
width: 30%;
min-width: 200px;
}
这将把输入元素的最小宽度设置为200像素。在这里，“px”代表“像素”。
现在，如果您试图在用户提交输入字段时确保输入字段至少包含一个字符，则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的，我会编辑这个答案，尽我最大的努力帮助你。
我只是花了些时间来弄清楚怎么做。 实际上，我发现的最简单的方法是将输入值移动到span之前的输入，保持输入1个符号宽度。虽然我不确定它是否适合你最初的需求。 也许它需要一些额外的代码，但在react+flux的应用程序中，这是非常自然的解决方案。
更好的是onvalue:
<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">
它还包括粘贴、拖放等。
下面是使用DIV和' contentteditable '属性来解决这个问题的另一种方法:
HTML:
<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>
CSS:(给DIV一些维度，使它更容易看到)
.fluidInput {
display : inline-block;
vertical-align : top;
min-width : 1em;
height : 1.5em;
font-family : Arial, Helvetica, sans-serif;
font-size : 0.8em;
line-height : 1.5em;
padding : 0px 2px 0px 2px;
border : 1px solid #aaa;
cursor : text;
}
.fluidInput * {
display : inline;
}
.fluidInput br {
display : none;
}
.fluidInput:empty:before {
content : attr(data-placeholder);
color : #ccc;
}
注意:如果你计划在你计划提交的FORM元素中使用这个，你将需要使用Javascript / jQuery来捕获提交事件，这样你就可以解析DIV的“值”(分别是. innerhtml或.html())。
