调整输入字段的宽度以适应其输入
调整输入字段的宽度以适应其输入
提问于 2010-08-03 07:11:09
<html>
<head>
</head>
<body>
<input type="text" value="1" style="min-width:1px;" />
</body>
</html>这是我的代码，它不工作。在HTML，JavaScript，PHP或CSS中有没有其他方法来设置最小宽度？
我想要一个宽度动态变化的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个内置的2em填充，这就是问题所在，第二个问题是min-width根本不能处理输入。
如果我设置的宽度超过了整个程序的要求，我需要1px的宽度，只有在需要的时候才需要。
回答 19
Stack Overflow用户
回答已采纳
发布于 2010-08-03 07:45:04
Stack Overflow用户
发布于 2017-04-19 15:12:15
在现代浏览器版本中，CSS单元ch也是可用的。据我所知，它是与字体无关的单位，其中1ch等于任何给定字体中字符0 (零)的宽度。
因此，像下面这样简单的东西可以用作调整大小的函数：
var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function
function resizeInput() {
this.style.width = this.value.length + "ch";
}input{ font-size:1.3em; padding:.5em; }<input>
该示例将"elem“的大小调整为值的长度+2个字符。
单元ch的一个潜在问题是，在许多字体(即Helvetica)中，字符"m“的宽度超过字符0的宽度，而字符"i”要窄得多。根据this的帖子，1ch通常比平均字符宽度宽20-30%左右。
Stack Overflow用户
发布于 2017-12-08 05:49:34
这是一个特定于角度的答案，但这对我来说很有效，并且在简单性和易用性方面非常令人满意：
<input [style.width.ch]="value.length" [(ngModel)]="value" />它通过Jani's answer中的字符单位自动更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3392493
复制相关文章
相似问题