国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端：對高度自適應的輸入框說不~

xiaoqibTn / 1123人閱讀

摘要：出現(xiàn)問題就是每次設置，一旦我們輸入的內容超過鍵盤，就會不斷閃頻。占位符統(tǒ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進行監(jiān)聽輸入的時候，事實上他會把還沒輸入到屏幕上的文字還在輸入法上的文字也計算在里邊，所以使用input進行監(jiān)聽是非常不妥當?shù)?，事實上有一個方法能夠監(jiān)聽中文的輸入，但僅僅是中文的輸入，compositionend能夠監(jiān)聽中文的輸入，沒選中文的輸入不會進行監(jiān)聽。ios出現(xiàn)問題就是每次設置auto，一旦我們輸入的內容超過鍵盤，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)一內容樣式 */
.font-style {
    font-family: Helvetica;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 48px;
    font-size: 32px;
}

摘自[[貝聊科技]不簡單的自適應高度輸入框](https://juejin.im/post/5b7653...，所以那段時間瘋狂在網上找解決方法。這是一種方法，但是這個方法是有問題的，如果我們要給輸入的東西加上背景，比如說給textarea加上一個背景，然后問題就出現(xiàn)了，因為span是行內元素，背景能夠到達的位置是span輸入的內容范圍，如果是內容少還好，內容多就炸了，一行中有一部分是沒有背景顏色的。

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的樣式設置成完全一樣，必須完全一樣，然后把div的偏移量設置特別大，但是不能夠設置div為display: none，這樣我們就獲取不到他的高度了，隨便你怎么設置，只要隱藏這個東西就好了。

4、contenteditable

還有一種方法是把div變?yōu)榭删庉嫷臓顟B(tài)，但是這種方法一來就被我放棄了，因為要兼容多種機型，可能有的機型不兼容，而且要輸入的字數(shù)，那就炸了，他使用的很少見的DOMNodeInserted，這不炸了嘛。

這幾種方法在安卓上都還可以，但是在ios都炸了，我想貝聊的這位兄弟應該是沒嘗試輸入很多文字，一旦輸入很多文字，內容超過鍵盤，第一種方法就出現(xiàn)閃頻，第二種方法直接文字都不見了，第三種方法pc端還能接受，但是移動端有些卡頓，文字一多，就直接炸了。反正一旦文字輸多了，ios各種情況就開始出現(xiàn)了。所以我總結的經驗的就是對高度自適應的輸入框說不，這個需求做不了，沒法做?？蛻舳藨撌强梢宰龅?，因為我看到作文紙條這個app是實現(xiàn)了這個功能的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97144.html

相關文章

  • 移動端自適應布局方案

    摘要：背景現(xiàn)在工作中有超過一半的時間用于移動端項目的開發(fā)，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。 背景 現(xiàn)在工作中有超過一半的時間用于移動端項目的開發(fā)，包括app嵌入頁，微信頁面和移動wap頁。 開發(fā)移動端頁面跟開發(fā)PC頁面的一個大區(qū)別就是移動端對響應式布...

    zacklee 評論0 收藏0

  • 使用contenteditable+div模擬textarea文本域實現(xiàn)高度自適應

    摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域實現(xiàn)高度自適應 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...

    seasonley 評論0 收藏0

  • 使用contenteditable+div模擬textarea文本域實現(xiàn)高度自適應

    摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域實現(xiàn)高度自適應 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...

    Olivia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<