輸入框跟隨文字內(nèi)容適配寬實現(xiàn)示例
實現(xiàn)源碼
// 常見一個輔助元素
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;
// 將輔助元素添加到頁面
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();
});大概思路
其實核心點就是，如何獲取輸入框元素內(nèi)文字內(nèi)容的寬度值？
直接通過輸入框元素肯定是無法獲取到其文字內(nèi)容寬度的，我們需要跳出輸入框的限制，將文字內(nèi)容獨立出來。
首先，我們肯定是能夠拿到輸入框的文字內(nèi)容的，使用 input.value 即可獲取文字內(nèi)容。
OK，文字內(nèi)容有了，如何計算文字內(nèi)容的寬度呢？
文字內(nèi)容寬度
實現(xiàn)方案其實有 2 種，一種是使用 Canvas 的能力，另一種是使用輔助的 div 元素。
可能大部分同學(xué)還不是很了解 Canvas，所以本文就使用 div 元素的方式進(jìn)行講解。
首先，先定義好最基礎(chǔ)的 HTML 和 CSS，代碼如下：
<input id="textbox" type="text" />
input {
padding: 8px;
}
此時，我們會得到一個最基礎(chǔ)的輸入框元素，沒有任何文字內(nèi)容。當(dāng)我們往輸入框元素內(nèi)輸入內(nèi)容時，輸入框元素的寬度也不會跟隨變化。
然后通過 JavaScript 創(chuàng)建一個輔助的 div 元素，我們先將它添加到 body 元素內(nèi)。
需要注意的是，文字內(nèi)容的寬度會各被字體樣式、大小、行間距等等因素所影響。本文作為講解，暫時不考慮這么多影響因素，但會通過影響因素之一 “字體” 相關(guān)做個相關(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 輔助元素的寬度，賦值給輸入框元素，這樣是不是就實現(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();
});
我們來看看效果。
當(dāng)我們在輸入框元素內(nèi)隨便輸入一個內(nèi)容，會發(fā)現(xiàn)輸入框就撐滿了整個頁面。
這是因為 div 輔助元素是塊級元素，寬度默認(rèn)是 100% 所導(dǎo)致的。那如何要獲取文字內(nèi)容寬度的話，要將它設(shè)置為行內(nèi)元素嘛？
答案是不需要的，只要給 div 輔助元素添加絕對定位，使其脫離正常文檔流即可。
// ... fakeEle.style.position = 'absolute'; // ...
此時，我們會發(fā)現(xiàn)已經(jīng)基本實現(xiàn)了我們想要的效果。
是的，我們已經(jīng)解決了最核心的問題，但仍然還存在一些問題，需要我們進(jìn)行處理。
細(xì)節(jié)處理
比如，輸入多個空格的時候，寬度計算就錯誤了。
這就需要我們將空格進(jìn)行一下處理，將它替換成   即可，代碼如下：
// 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)容適配寬實現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于輸入框文字內(nèi)容寬度適配的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序 自己制作小組件實例詳解的相關(guān)資料,自己制作小組件在項目中應(yīng)用，需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了js中yield參數(shù)應(yīng)用示例深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序組件之srcoll-view的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要為答案及介紹了Babel?插件開發(fā)&訪問節(jié)點實例詳解，整理一下?Babel?插件開發(fā)時用得到的轉(zhuǎn)換操作相關(guān)的?API，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序頁面間通信的5種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家介紹了buildcheck包報錯問題排查解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文主要介紹Google 地圖類型,這里整理了Google 地圖類型的基本知識資料，并附簡單的示例代碼便于大家學(xué)習(xí)參考，希望能幫助有需要的小伙伴2016-08-08
這篇文章主要為大家介紹了uniapp封裝canvas組件和方法無腦繪制并保存小程序分享海報實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 Image API實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01