我的HTML中有一个文本域,聚焦时底部边框为白色,我希望它将文本域的宽度更改为当前文本的长度(当然有一些限制)。我试过css的最小宽度和最大宽度,但似乎什么也做不了。我认为用JS实现它需要一个硬编码的宽度表,我不想这样做。
编辑:
这只是简单的CSS,但下面是代码:
#container {
width: 100%;
height: 52px;
background: #673ab7;
}
#textbox {
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
background: none;
border: none;
vertical-align: top;
margin-top: 13px;
margin-left: 13px;
outline: none;
}
#textbox:focus {
border-bottom: 2px solid white;
}
<div id="container">
<input type="text" id="textbox" placeholder="placeholder" />
</div>
最佳答案
这应该足够有效:
<form>
<input type="text" id="textfield" onkeyup="changeSize()">
</form>
var sizeIs=20;
function changeSize(){
sizeIs=sizeIs+5;
document.getElementById("textfield").style.width= sizeIs+"px";
}
这样做的目的是,每当用户键入字符时,函数就会激发并增加文本字段的大小。你可以用这个来做任何你需要做的事。
关于javascript - 尺寸变化<输入>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35778205/