后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何让输入字段随着输入而增大/缩小
如果您经常使用 CSS，您可能已经注意到，在使输入字段适应其内容方面，输入字段的行为与其他 HTML 元素不同。在本文中，我将向您展示一个简单的技巧，使用一些 CSS 和 JavaScript 代码，让输入字段随着您的输入而伸缩。
对于标记，我们需要一个输入和一个跨度。
<input type="text">
<span></span>
现在让我们将一些样式应用到我们的内容中。
input[type="text"],
span {
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.75rem;
border: 2px solid #666;
/* box-sizing: border-box; */
/* padding: 0.5em 1em; */
}
input[type="text"] {
width: 6em;
padding: 0.5em 1em;
color: #555;
border-radius: 2em;
outline: 0;
}
input[type="text"]:focus {
border-color: #ff7996;
}
span {
position: absolute;
left: -9999px;
display: inline-block;
min-width: 6em;
}
这里有一点需要注意。应用于输入字段的边框和字体属性也需要应用于 span，如果我们将 设置为box-sizing，则 padding 也需要应用于 span 和输入框border-box。使用 JavaScript 时您就会明白为什么。请注意，我min-width为 span 和width输入字段分别设置了 ，这只是为了为输入字段设置一个预定义的宽度，以便它不会缩小到低于该宽度。其他样式只是为了隐藏 span 并使输入字段看起来更美观。
现在让我们开始实际的技巧。
const input = document.querySelector('input');
const span = document.querySelector('span');
input.addEventListener('input', function (event) {
span.innerHTML = this.value.replace(/\s/g, ' ');
this.style.width = span.offsetWidth + 'px';
});
在上面的代码中，我们只需监听文本输入框的输入事件，然后将 span 的内容替换为输入框中的内容。注意，由于 HTML 中多个空格只会渲染为一个空格，this.value因此我们也替换了 span 上的 空格。之后，我们将 span 的宽度应用到输入框中。
它看起来是这样的：
希望本文对您有所帮助。
如有任何问题或补充，欢迎在下方留言。