實現乙個高度自適應的輸入框

2021-09-24 06:43:45 字數 1457 閱讀 6725

###需求背景

####設想1：使用textarea實現 將textarea的高度設定成auto，overflow設定成visible。**如下：

複製**
但是經過測試，textarea實際上將是預設的高度，隨著輸入的增多會出現滾動條，並沒有達到我們想要的效果。

####設想2：contenteditable 我們知道可以將div的contenteditable設定偽true，將其變為可輸入狀態。**如下：

"true">


複製**
這樣就滿足了我們的第乙個需求——高度自適應。但是在手機上測試會發現第乙個問題，ios上面無法輸入。經過查詢資料，發現只需要為其新增如下樣式即可:

div


複製**
###placeholder 通過contenteditable方法實現的輸入框無法新增placeholder。

#####使用css模擬placeholder

// html


"true" data-placeholder="請輸入手機號碼">


// less


div    &:not(:empty)


}}複製**
但是經過測試在不同手機上面變現不一致，所以放棄了這種方案（猜測可能和:not偽類的相容有關，還沒有做驗證）。

#####使用css+js實現 placeholder

思路：根據輸入通過動態新增class，模擬placeholder的行為。

// html


"input-item empty" contenteditable="true" data-placeholder="請輸入手機號碼">


// less


.input-item


}// js


$('.input-item').on('keyup',function


()})


複製**
到此，我們已經實現了第二個需求——可以設定placeholder

####maxlength

同樣的，我們也不能通過直接設定maxlength來滿足需求。所以通過箭筒keyup事件來實時計算長度。

$('.input-item').on('keyup',function(event)


})複製**
以上**看上去沒有問題，但是會發現游標會跑到最前方，這樣就會造成不好的使用者體驗，甚至出現bug。所以在擷取了最大長度的使用者輸入後，我們還需要將游標放到最後。完整**如下：

$('.input-item').on('keyup',function(event)


else


}})複製**
到此為止，乙個可以自動增加高度，並且支援placeholder和maxlength的輸入框就大功告成了。

實現乙個高度自適應的輸入框

有placeholder，輸入為空時，顯示placeholder 可設定maxlength 將textarea的高度設定成auto，overflow設定成visible。如下 height auto overflow x visible overflow y visible width 300px ...

高度自適應的輸入框

有時候我們需要乙個高度能隨內容自動增加的輸入框，input顯然不行，因為input裡的文字是不換行的。文字域textarea裡的文字倒是換行的，可一旦文字內容超過其高度，textarea就會增加乙個煩人的滾動條，這是很影響視覺的，就如同下面 那麼有沒有辦法製作乙個高度能隨文字內容自動增加的輸入框呢？...

輸入框自適應輸入的內容

我的需求是 每次輸出英文分號 就把輸入框的長度增加。import react,from react import from react const inputdata setinputdata usestate 輸入框的內容 const length setlength usestate 316 初...