假设 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)