Javascript 改变尺寸<；输入>；

我的HTML中有一个文本字段，在聚焦时底部有白色边框，我希望它将文本字段的宽度更改为当前文本的长度（当然有一些限制）。我尝试了css的最小宽度和最大宽度，但似乎什么也做不了。我认为用JS实现它需要一个硬编码的宽度表，这是我不想做的

编辑：
这只是简单的CSS，但代码如下：

#容器{
宽度：100%；
高度：52px；
背景：#673ab7；
}
#文本框{
字体系列：无衬线；
字体大小：20px；
字体大小：粗体；
颜色：白色；
背景：无；
边界：无；
垂直对齐：顶部；
边缘顶端：13px；
左边距：13px；
大纲：无；
}
#文本框：焦点{
底部边框：2件纯白；
}

---

这应该足够有效：

<form>
<input type="text" id="textfield" onkeyup="changeSize()">
</form>

var sizeIs=20;
function changeSize(){
sizeIs=sizeIs+5;
document.getElementById("textfield").style.width= sizeIs+"px";
}

var sizeIs=20；
函数changeSize（）{
sizeIs=sizeIs+5；
document.getElementById（“textfield”）.style.width=sizeIs+“px”；
}

---

这样做的目的是，每当用户键入一个字符时，函数就会激发并增加文本字段的大小。您可以将此作为指南来做任何您需要做的事情。

我找到了一种方法，在找到后不需要任何宽度硬编码。 我在这里使用jQuery是因为我已经在我的项目中使用过它，但是将它移植到普通JavaScript应该相对容易。像

&

，

和空格这样的字符可能会使它出错，因此需要用

&编码


$（文档）.ready（函数（）{
$（'#textbox'）。在（'input'，function（）上{
if（$（'#textbox'）.val（）.length==0）{
$（'#measure'）.html（$（'#textbox'）.attr（'placeholder'））；
}否则{
var text=$（'#textbox'）.val（）；
text=text.替换（/&/g，“&；”）；
text=text.replace（//g'，）；
text=text.replace（//g'，）；
$（'#measure'）.html（文本）；
}
var w=$（'#measure'）.width（）；
如果（w>600）w=600；
$（'#文本框'）。宽度（w）；
});
$（'#textbox'）。触发器（'input'）；
});
html，正文{
保证金：0；
}
#容器{
宽度：100%；
高度：52px；
背景：#673ab7；
}
#文本框{
字体系列：无衬线；
字体大小：20px；
字体大小：粗体；
颜色：白色；
背景：无；
边界：无；
垂直对齐：顶部；
边缘顶端：13px；
左边距：13px；
大纲：无；
}
#文本框：焦点{
底部边框：2件纯白；
}
#量{
位置：绝对位置；
可见性：隐藏；
高度：自动；
宽度：自动；
空白：nowrap；
字体大小：20px；
字体大小：粗体；
字体系列：无衬线；
填充：0；
保证金：0；
}

您的问题有点不清楚。在您开始键入之前，边框的宽度是输入的全宽吗？如果你想在有人键入时更改边框，那么你需要使用JS。@hungerstar很抱歉混淆，我指的是文本框的宽度……谢谢，但我不想使用硬编码的5px宽度。此外，退格将增加宽度，而不是减小宽度。但多亏了你，我意识到我需要使用JS，而我只想把它作为最后的手段。