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

騫諱護發布于2019-08-22 17:12 / 1269人閱讀

摘要：輸入框首尾清除空格在中監聽鍵盤事件移動端底部被彈出的鍵盤遮擋輸入框是通過一直放在頁面底部，當點擊進行輸入的時候，就會出現如下圖片情況有的機型會遮擋一些。

前言

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會自動過濾用戶輸入的首尾空白字符

貌似angular也提供了類似過濾的方法，感興趣的可以自己去查一下。

在input中監聽鍵盤事件

在用戶登錄或者搜索框的時候，一般都會監聽鍵盤事件綁定回車按鍵，來執行登錄/搜索等操作。

原生綁定:

 
 function keydownMsg(key) {
        keyCode = key.keyCode; //獲取按鍵代碼
        if (keyCode == 13) {  //判斷按下的是否為回車鍵
            // 在input上監聽到回車 do something
        }
    }

Vue按鍵修飾符

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

結語

上述內容就是我遇到的一些input問題的解決方式以及跟input相關的一些東西，如果有什么錯誤，歡迎指正！希望大家看完可以有所收獲，喜歡的話，趕緊點波訂閱關注/喜歡，方便以后查找復制粘貼，233。

希望看完的朋友可以點個喜歡/關注，您的支持是對我最大的鼓勵。

個人blog and 掘金個人主頁，如需轉載，請放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。

如果喜歡本文的話，可以關注一下我剛開的訂閱號，漫漫技術路，期待未來共同學習成長。

以上2018.5.12

參考資料：

Element.scrollIntoView()

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

white-space

String.prototype.trim()

Vue按鍵修飾符

keyCode鍵碼值表

云服務器 GPU云服務器解決問題的方法數據分析的一些方法云服務器問題及解決方法關于javascript的問題

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

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

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

摘要：輸入框首尾清除空格在中監聽鍵盤事件移動端底部被彈出的鍵盤遮擋輸入框是通過一直放在頁面底部，當點擊進行輸入的時候，就會出現如下圖片情況有的機型會遮擋一些。前言 input是我們接受來自用戶的數據常用標簽，在前端開發中，相信每個人都會用到這個標簽，所以在開發過程中也時候也會遇到一些問題，本文的內容是我在跟input相愛相殺過程中產生的，在此記錄分享一下。如果喜歡的話可以點波贊/關注，支持...

vibiu 2019-08-29 15:23 評論0 收藏0
關于input的一些問題解決方法分享

摘要：輸入框首尾清除空格在中監聽鍵盤事件移動端底部被彈出的鍵盤遮擋輸入框是通過一直放在頁面底部，當點擊進行輸入的時候，就會出現如下圖片情況有的機型會遮擋一些。前言 input是我們接受來自用戶的數據常用標簽，在前端開發中，相信每個人都會用到這個標簽，所以在開發過程中也時候也會遇到一些問題，本文的內容是我在跟input相愛相殺過程中產生的，在此記錄分享一下。如果喜歡的話可以點波贊/關注，支持...

chanjarster 2019-08-02 10:26 評論0 收藏0
前端常用代碼片段(五)

摘要：當運行時，如果不為，則將超時函數推送到事件隊列，并且函數退出，從而使調用堆棧清零。因此，該方法從頭到尾不經過直接遞歸調用即可處理，因此調用堆棧保持清晰，無論迭代次數如何。前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里 1.tap事件點透問題？問題點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失后發現觸...

MoAir 2019-08-23 14:41 評論0 收藏0
大規模應用TypeScript「2019 JSConf -Brie Bunge」

摘要：眾所周知，在大公司中進行大的改革很難。目前公司有超過名開發人員，其中有個以上是前端。從年起，已經在一些小規模團隊中探索使用。在年的前端調查中，靜態類型系統呼聲最高。在我們的主倉庫中，絕大多數的公共依賴都已經由做到了類型聲明。特別說明這是一個由simviso團隊進行的關于Airbnb大規模應用TypeScript分享的翻譯文檔，分享者是Airbnb的高級前端開發Brie Bunge ...

qpal 2019-08-26 14:04 評論0 收藏0