前言
input是我們接受來自使用者的資料常用標籤，在前端開發中，相信每個人都會用到這個標籤，所以在開發過程中也時候也會遇到一些問題，本文的內容是我在跟input相愛相殺過程中產生的，在此記錄分享一下。如果喜歡的話可以點波贊/關注，支援一下，希望大家看完本文可以有所收穫。
個人部落格瞭解一下：obkoro1.com
本文內容包括：
- 移動端底部input被彈出的鍵盤遮擋。
- 控制input顯/隱密碼。
- 在input中輸入emoji表情導致請求失敗。
- input多行輸入顯示換行。
- 輸入框首尾清除空格-trim()
- 在input中監聽鍵盤事件
移動端底部input被彈出的鍵盤遮擋
input輸入框是通過position:fixed一直放在頁面底部，當點選input進行輸入的時候，就會出現如下圖片情況（有的機型會遮擋一些）。
當時這個問題是去年在ios中遇到的，在最新版的ios系統中，貌似解決了這個bug，但是為了向下相容以及防止其他其他機型也出現這個問題，大家可以稍微記一下這個解決方法。
在解決這個問題的時候，有試過下面這種方法:
在input的focus事件中，開啟一個定時器，然後每隔300毫秒進行一次document.body.scrollTop=document.body.scrollHeight的調整，執行3次即可。
當時還以為解決了，但是當你底部評論區還有很多內容，你每次點選input，想要輸入的時候，整個頁面通過scrollTop就會不斷的向下滾動，這個體驗不用說自己也知道是相當失敗的，然後就再去找解決方法，結果就有了下面這個。
Element.scrollIntoView()
Element.scrollIntoView():方法讓當前的元素滾動到瀏覽器視窗的可視區域內。
document.querySelector('#inputId').scrollIntoView();
//只要在input的點選事件，或者獲取焦點的事件中，加入這個api就好了
複製程式碼這個api還可以設定對齊方法，選擇將input放在螢幕的上方/下方，類似的api還有:Element.scrollIntoViewIfNeeded()，這兩個是解決同一個問題的，選擇一個用就可以了。
控制input顯/隱密碼
這個就很簡單了，只需更改input的type屬性值就可以了。可以看一下codepen的demo
//點選函式，獲取dom，判斷更改屬性。
show(){
let input=document.getElementById("inputId");
if(input.type=="password"){
input.type='text';
}else{
input.type='password';
}
}
複製程式碼在input中輸入emoji表情導致請求失敗
現在使用者輸入emoji簡直已經成為了習慣，如果前後端沒有對emoji表情進行處理，那麼使用者在上傳的時候，就會請求失敗。
通常這個問題是後端那邊處理比較合適的，前端是做不了這件事的，或者說很難做這件事。
之前看過一篇文章，這個文章裡面講了怎麼在上傳和拿資料下來的時候不會報錯，但是不能在顯示的時候轉換為表情。
ps:之前拿微信使用者名稱的時候，有些人可能在微信暱稱上面就會包含表情，如果後端沒對錶情處理轉換，那麼普通請求也會出錯。
之所以說這個，當表單請求錯誤的時候各位如果實在找不到問題可以往這方面考慮一下，我真的被坑過的o(╥﹏╥)o。
textarea多行回車換行，顯示的時候換行設定：
在使用textarea標籤輸入多行文字的時候，如果沒有對多行文字顯示處理，會導致沒有換行的情況,就比如下面這種情況，使用者在textarea是有換行的。
Css屬性:white-space
white-space 屬性用於設定如何處理元素內的空白，其中包括空白符和換行符。
只要在顯示內容的地方將該屬性設定為white-space: pre-line或者white-space:pre-wrap，多行文字就可以換行了。
設定之後，顯示效果：
輸入框首尾清除空格-trim()
輸入框清除首尾空格是input較為常見的需求，通常在上傳的時候將首尾空格去除掉。一般使用:字串的原生方法trim() 從一個字串的兩端刪除空白字元。
trim() 方法並不影響原字串本身，它返回的是一個新的字串。
原生清除方法:
//原生方法獲取值，清除首尾空格上傳str2
var str2 = document.getElementById("inputId").trim();
複製程式碼Vue清除方法：
Vue提供了修飾符刪除首尾空格， 加了修飾符.trim會自動過濾使用者輸入的首尾空白字元
<input v-model.trim="msg">
複製程式碼貌似angular也提供了類似過濾的方法，感興趣的可以自己去查一下。
在input中監聽鍵盤事件
在使用者登入或者搜尋框的時候，一般都會監聽鍵盤事件繫結回車按鍵，來執行登入/搜尋 等操作。
原生繫結:
<input onkeydown="keydownMsg(event)" type="text" />
function keydownMsg(key) {
keyCode = key.keyCode; //獲取按鍵程式碼
if (keyCode == 13) { //判斷按下的是否為Enter鍵
// 在input上監聽到回車 do something
}
}
複製程式碼Vue按鍵修飾符
Vue為監聽鍵盤事件，提供了按鍵修飾符，並且為常用的按鍵提供了別名，使用方法如下:當回車按鍵在input中被按下的時候，會觸發裡面的函式。
<input @keyup.enter="enterActive">
複製程式碼結語
上述內容就是我遇到的一些input問題的解決方式以及跟input相關的一些東西，如果有什麼錯誤，歡迎指正！希望大家看完可以有所收穫，喜歡的話，趕緊點波訂閱關注/喜歡，方便以後查詢複製貼上，233。
希望看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。
個人blog and 掘金個人主頁，如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。
如果喜歡本文的話，可以關注一下我剛開的訂閱號，漫漫技術路，期待未來共同學習成長。
以上2018.5.12