關於input的一些問題解決方法分享

前言

input是咱們接受來自用戶的數據經常使用標籤，在前端開發中，相信每一個人都會用到這個標籤，因此在開發過程當中也時候也會遇到一些問題，本文的內容是我在跟input相愛相殺過程當中產生的，在此記錄分享一下。若是喜歡的話能夠點波贊/關注，支持一下，但願你們看完本文能夠有所收穫。

我的博客瞭解一下： obkoro1.com

---

本文內容包括：

1. 移動端底部input被彈出的鍵盤遮擋。
2. 控制input顯/隱密碼。
3. 在input中輸入emoji表情致使請求失敗。
4. input多行輸入顯示換行。
5. 輸入框首尾清除空格-trim()
6. 在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) {  //判斷按下的是否爲回車鍵
            // 在input上監聽到回車 do something
        }
    }

Vue按鍵修飾符

Vue爲監聽鍵盤事件，提供了按鍵修飾符，而且爲經常使用的按鍵提供了別名，使用方法以下:當回車按鍵在input中被按下的時候，會觸發裏面的函數。

<input @keyup.enter="enterActive">

---

結語

上述內容就是我遇到的一些input問題的解決方式以及跟input相關的一些東西，若是有什麼錯誤，歡迎指正！但願你們看完能夠有所收穫，喜歡的話，趕忙點波訂閱關注/喜歡，方便之後查找複製粘貼，233。

但願看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。

我的blog and 掘金我的主頁，如需轉載，請放上原文連接並署名。碼字不易，感謝支持！本人寫文章本着交流記錄的心態，寫的很差之處，不撕逼，可是歡迎指點。

若是喜歡本文的話，能夠關注一下我剛開的訂閱號，漫漫技術路，期待將來共同窗習成長。

以上2018.5.12

參考資料：

Element.scrollIntoView()

移動前端手機輸入法自帶emoji表情字符處理

white-space

String.prototype.trim()

Vue按鍵修飾符

keyCode鍵碼值表