資訊專欄INFORMATION COLUMN
摘要：出現(xiàn)問題就是每次設(shè)置，一旦我們輸入的內(nèi)容超過鍵盤，就會不斷閃頻。占位符統(tǒng)一內(nèi)容樣式摘自貝聊科技不簡單的自適應(yīng)高度輸入框，所以那段時間瘋狂在網(wǎng)上找解決方法。所以我總結(jié)的經(jīng)驗的就是對高度自適應(yīng)的輸入框說不，這個需求做不了，沒法做。
1、textarea:
核心想法: $(this).height(this.scrollHeight)
$textarea.addEventListener("input", function () {
var currentLength = this.value.length;
if (currentLength < lastLength) {
this.style.height = "auto";
}
var currentLength = this.scrollHeight;
if (lastHeight !== currentHeight || !this.style.height) {
this.style.height = currentHeight + 2 + "px";
}
lastLength = currentLength;
lastHeight = currentHeight;
})
這個方法在ios上會變得非常奇怪，因為我們使用input進(jìn)行監(jiān)聽輸入的時候，事實上他會把還沒輸入到屏幕上的文字還在輸入法上的文字也計算在里邊，所以使用input進(jìn)行監(jiān)聽是非常不妥當(dāng)?shù)?，事實上有一個方法能夠監(jiān)聽中文的輸入，但僅僅是中文的輸入，compositionend能夠監(jiān)聽中文的輸入，沒選中文的輸入不會進(jìn)行監(jiān)聽。ios出現(xiàn)問題就是每次設(shè)置auto，一旦我們輸入的內(nèi)容超過鍵盤，ios就會不斷閃頻。目前沒找到解決的方法，我看作文紙條這個app上是實現(xiàn)了這個功能，但是他是使用的原生來實現(xiàn)的。這個方法舍棄。
2、占位符 .container {
position: relative;
min-height: 90px;
}
.text {
font-size: 0;
color: transparent;
white-space: pre-wrap;
}
.textarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
resize: none;
border: 0;
outline: none;
}
/* 統(tǒng)一內(nèi)容樣式 */
.font-style {
font-family: Helvetica;
word-wrap: break-word;
word-break: break-all;
line-height: 48px;
font-size: 32px;
}
摘自[[貝聊科技]不簡單的自適應(yīng)高度輸入框](https://juejin.im/post/5b7653...，所以那段時間瘋狂在網(wǎng)上找解決方法。這是一種方法，但是這個方法是有問題的，如果我們要給輸入的東西加上背景，比如說給textarea加上一個背景，然后問題就出現(xiàn)了，因為span是行內(nèi)元素，背景能夠到達(dá)的位置是span輸入的內(nèi)容范圍，如果是內(nèi)容少還好，內(nèi)容多就炸了，一行中有一部分是沒有背景顏色的。
3、偏移的方法 .placeholder {
width: 100px;
line-height: 20px;
font-size: 20px;
transform: translateX(-1000px);
}
#textarea {
width: 100px;
line-height: 20px;
font-size: 20px;
}
$textarea.on("input", function () {
var text = this.value;
$placeholder.innerText = text;
var height = $placeholder.style.height;
this.height = height + "px";
})
這種方法就是把textarea和div的樣式設(shè)置成完全一樣，必須完全一樣，然后把div的偏移量設(shè)置特別大，但是不能夠設(shè)置div為display: none，這樣我們就獲取不到他的高度了，隨便你怎么設(shè)置，只要隱藏這個東西就好了。
4、contenteditable還有一種方法是把div變?yōu)榭删庉嫷臓顟B(tài)，但是這種方法一來就被我放棄了，因為要兼容多種機(jī)型，可能有的機(jī)型不兼容，而且要輸入的字?jǐn)?shù)，那就炸了，他使用的很少見的DOMNodeInserted，這不炸了嘛。
這幾種方法在安卓上都還可以，但是在ios都炸了，我想貝聊的這位兄弟應(yīng)該是沒嘗試輸入很多文字，一旦輸入很多文字，內(nèi)容超過鍵盤，第一種方法就出現(xiàn)閃頻，第二種方法直接文字都不見了，第三種方法pc端還能接受，但是移動端有些卡頓，文字一多，就直接炸了。反正一旦文字輸多了，ios各種情況就開始出現(xiàn)了。所以我總結(jié)的經(jīng)驗的就是對高度自適應(yīng)的輸入框說不，這個需求做不了，沒法做?？蛻舳藨?yīng)該是可以做的，因為我看到作文紙條這個app是實現(xiàn)了這個功能的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97144.html
摘要：背景現(xiàn)在工作中有超過一半的時間用于移動端項目的開發(fā)，包括嵌入頁，微信頁面和移動頁。經(jīng)過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應(yīng)布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應(yīng)式布局的方案。 背景 現(xiàn)在工作中有超過一半的時間用于移動端項目的開發(fā)，包括app嵌入頁，微信頁面和移動wap頁。 開發(fā)移動端頁面跟開發(fā)PC頁面的一個大區(qū)別就是移動端對響應(yīng)式布...
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式，否則會出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時光標(biāo)和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應(yīng)的文本域，一開始是使用textarea并搭配auto-size...
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式，否則會出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時光標(biāo)和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應(yīng)的文本域，一開始是使用textarea并搭配auto-size...
閱讀 2149·2023-04-25 18:49
閱讀 1854·2019-08-30 14:02
閱讀 2657·2019-08-29 17:24
閱讀 3334·2019-08-28 18:10
閱讀 2938·2019-08-28 18:03
閱讀 502·2019-08-26 12:01
閱讀 3322·2019-08-26 11:31
閱讀 1442·2019-08-26 10:29
