欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例

 更新時(shí)間：2022年08月12日 11:12:01   作者：西炒蛋  
這篇文章主要為大家介紹了輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

實(shí)現(xià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)聽輸入框元素內(nèi)容變化，輸入框?qū)挾雀S文字內(nèi)容數(shù)量適配
textboxEle.addEventListener('input', function (e) {
    setWidth();
});

大概思路

其實(shí)核心點(diǎn)就是，如何獲取輸入框元素內(nèi)文字內(nèi)容的寬度值？

直接通過輸入框元素肯定是無(wú)法獲取到其文字內(nèi)容寬度的，我們需要跳出輸入框的限制，將文字內(nèi)容獨(dú)立出來(lái)。

首先，我們肯定是能夠拿到輸入框的文字內(nèi)容的，使用 input.value 即可獲取文字內(nèi)容。

OK，文字內(nèi)容有了，如何計(jì)算文字內(nèi)容的寬度呢？

文字內(nèi)容寬度

實(shí)現(xiàn)方案其實(shí)有 2 種，一種是使用 Canvas 的能力，另一種是使用輔助的 div 元素。

可能大部分同學(xué)還不是很了解 Canvas，所以本文就使用 div 元素的方式進(jìn)行講解。

首先，先定義好最基礎(chǔ)的 HTML 和 CSS，代碼如下：

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

input {
  padding: 8px;
}

此時(shí)，我們會(huì)得到一個(gè)最基礎(chǔ)的輸入框元素，沒有任何文字內(nèi)容。當(dāng)我們往輸入框元素內(nèi)輸入內(nèi)容時(shí)，輸入框元素的寬度也不會(huì)跟隨變化。

然后通過 JavaScript 創(chuàng)建一個(gè)輔助的 div 元素，我們先將它添加到 body 元素內(nèi)。

需要注意的是，文字內(nèi)容的寬度會(huì)各被字體樣式、大小、行間距等等因素所影響。本文作為講解，暫時(shí)不考慮這么多影響因素，但會(huì)通過影響因素之一 “字體” 相關(guān)做個(gè)相關(guān)示例，提供各位同學(xué)作為參考。

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);

監(jiān)聽輸入框元素的 input 事件，將文字內(nèi)容同步給 div 輔助元素。

然后再反向的，獲取 div 輔助元素的寬度，賦值給輸入框元素，這樣是不是就實(shí)現(xiàn)了啦了？

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();
});

我們來(lái)看看效果。

當(dāng)我們?cè)谳斎肟蛟貎?nèi)隨便輸入一個(gè)內(nèi)容，會(huì)發(fā)現(xiàn)輸入框就撐滿了整個(gè)頁(yè)面。

這是因?yàn)?div 輔助元素是塊級(jí)元素，寬度默認(rèn)是 100% 所導(dǎo)致的。那如何要獲取文字內(nèi)容寬度的話，要將它設(shè)置為行內(nèi)元素嘛？

答案是不需要的，只要給 div 輔助元素添加絕對(duì)定位，使其脫離正常文檔流即可。

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

此時(shí)，我們會(huì)發(fā)現(xiàn)已經(jīng)基本實(shí)現(xiàn)了我們想要的效果。

是的，我們已經(jīng)解決了最核心的問題，但仍然還存在一些問題，需要我們進(jìn)行處理。

細(xì)節(jié)處理

比如，輸入多個(gè)空格的時(shí)候，寬度計(jì)算就錯(cuò)誤了。

這就需要我們將空格進(jìn)行一下處理，將它替換成 &nbsp 即可，代碼如下：

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

還有，輔助元素不應(yīng)該出現(xiàn)在界面上，所以我們要將他隱藏掉。

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

還有一些其它小細(xì)節(jié)，有興趣的話，自己嘗試一下吧。

以上就是輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于輸入框文字內(nèi)容寬度適配的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論