调整文本框的宽度以自动适应其内容

假设 input 的 id 为 textbox，如下所示：

<input type="text" id="textbox" />

为了根据其内容动态调整其宽度，我们创建了一个伪元素，其内容与输入值相同。我们将输入的宽度设置为伪元素的宽度。

const fakeEle = document.createElement('div')

// 完全隐藏
fakeEle.style.position = 'absolute'
fakeEle.style.top = '0'
fakeEle.style.left = '-9999px'
fakeEle.style.overflow = 'hidden'
fakeEle.style.visibility = 'hidden'
fakeEle.style.whiteSpace = 'nowrap'
fakeEle.style.height = '0'

// 我们从文本框中复制一些影响宽度的样式
const textboxEle = document.getElementById('textbox')

// 获取样式
const styles = window.getComputedStyle(textboxEle)

// 从文本框中复制字体样式
fakeEle.style.fontFamily = styles.fontFamily
fakeEle.style.fontSize = styles.fontSize
fakeEle.style.fontStyle = styles.fontStyle
fakeEle.style.fontWeight = styles.fontWeight
fakeEle.style.letterSpacing = styles.letterSpacing
fakeEle.style.textTransform = styles.textTransform

fakeEle.style.borderLeftWidth = styles.borderLeftWidth
fakeEle.style.borderRightWidth = styles.borderRightWidth
fakeEle.style.paddingLeft = styles.paddingLeft
fakeEle.style.paddingRight = styles.paddingRight

// 将假元素附加到 body
document.body.appendChild(fakeEle)

下面的方法为伪元素设置 HTML，计算其宽度，并将结果设置为原始输入。

const setWidth = function () {
  const string = textboxEle.value || textboxEle.getAttribute('placeholder') || ''
  fakeEle.innerHTML = string.replace(/\s/g, '&' + 'nbsp;')

  const fakeEleStyles = window.getComputedStyle(fakeEle)
  textboxEle.style.width = fakeEleStyles.width
}

最后，当用户通过监听 input 事件更改输入值时，我们调用 setWidth 方法：

setWidth()

textboxEle.addEventListener('input', setWidth)

查看效果