// 常見(jiàn)一個(gè)輔助元素
const fakeEle = document.createElement('div');
// 隱藏輔助元素
fakeEle.style.position = 'absolute';
fakeEle.style.left = '-9999px';
fakeEle.style.visibility = 'hidden';
fakeEle.style.whiteSpace = 'nowrap';
// 獲取輸入框元素的樣式
const textboxEle = document.getElementById('textbox');
const styles = window.getComputedStyle(textboxEle);
// 將輸入框的字體樣式賦給輔助元素
fakeEle.style.font = styles.font;
// 將輔助元素添加到頁(yè)面
document.body.appendChild(fakeEle);
const setWidth = function () {
    const string = textboxEle.value || textboxEle.getAttribute('placeholder') || '';
    fakeEle.innerHTML = string.replace(/\s/g, ` `);
    // 獲取輔助元素的樣式
    const fakeEleStyles = window.getComputedStyle(fakeEle);
    // 將輔助元素的寬度賦給輸入框元素
    textboxEle.style.width = fakeEleStyles.width;
};
setWidth();
// 監(jiān)聽(tīng)輸入框元素內(nèi)容變化，輸入框?qū)挾雀S文字內(nèi)容數(shù)量適配
textboxEle.addEventListener('input', function (e) {
    setWidth();
});

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

input {
  padding: 8px;
}

const fakeEle = document.createElement('div');
const textboxEle = document.getElementById('textbox');
// 獲取輸入框元素樣式
const styles = window.getComputedStyle(textboxEle);
// 將輸入框元素的 font 屬性賦給輔助的 div 元素
fakeEle.style.font = styles.font;
document.body.appendChild(fakeEle);

const setWidth = function () {
  const string = textboxEle.value || '';
  fakeEle.innerHTML = string;
  // 獲取輔助元素的樣式
  const fakeEleStyles = window.getComputedStyle(fakeEle);
  // 將輔助元素的寬度賦給輸入框元素
  textboxEle.style.width = fakeEleStyles.width;
};
textboxEle.addEventListener('input', function (e) {
  setWidth();
});

// ...
fakeEle.style.position = 'absolute';
// ...

// fakeEle.innerHTML = string;
fakeEle.innerHTML = string.replace(/\s/g, ` `);

// ...
fakeEle.style.left = '-9999px';
fakeEle.style.visibility = 'hidden';
fakeEle.style.whiteSpace = 'nowrap';
// ...