我的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/

10-12 15:11