日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
關(guān)于input的一些問題解決方法分享

前言

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了千陽免費(fèi)建站歡迎大家使用！

input是我們接受來自用戶的數(shù)據(jù)常用標(biāo)簽，在前端開發(fā)中，相信每個人都會用到這個標(biāo)簽，所以在開發(fā)過程中也時候也會遇到一些問題，本文的內(nèi)容是我在跟input相愛相殺過程中產(chǎn)生的，在此記錄分享一下。如果喜歡的話可以點(diǎn)波贊/關(guān)注，支持一下，希望大家看完本文可以有所收獲。

個人博客了解一下：obkoro1.com 

本文內(nèi)容包括：

  • 移動端底部input被彈出的鍵盤遮擋。
  • 控制input顯/隱密碼。
  • 在input中輸入emoji表情導(dǎo)致請求失敗。
  • input多行輸入顯示換行。
  • 輸入框首尾清除空格-trim()
  • 在input中監(jiān)聽鍵盤事件

移動端底部input被彈出的鍵盤遮擋

input輸入框是通過position:fixed一直放在頁面底部，當(dāng)點(diǎn)擊input進(jìn)行輸入的時候，就會出現(xiàn)如下圖片情況（有的機(jī)型會遮擋一些）。

當(dāng)時這個問題是去年在ios中遇到的，在***版的ios系統(tǒng)中，貌似解決了這個bug，但是為了向下兼容以及防止其他其他機(jī)型也出現(xiàn)這個問題，大家可以稍微記一下這個解決方法。

在解決這個問題的時候，有試過下面這種方法:


在input的focus事件中，開啟一個定時器，然后每隔300毫秒進(jìn)行一次document.body.scrollTop=document.body.scrollHeight的調(diào)整，運(yùn)行3次即可。

當(dāng)時還以為解決了，但是當(dāng)你底部評論區(qū)還有很多內(nèi)容，你每次點(diǎn)擊input，想要輸入的時候，整個頁面通過scrollTop就會不斷的向下滾動，這個體驗不用說自己也知道是相當(dāng)失敗的，然后就再去找解決方法，結(jié)果就有了下面這個。

Element.scrollIntoView()

Element.scrollIntoView():方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。

 
 
 
 
    
  
  
  
  
  1. document.querySelector('#inputId').scrollIntoView();  
    2. 
  
  
  
  
  2. //只要在input的點(diǎn)擊事件，或者獲取焦點(diǎn)的事件中，加入這個api就好了 
    3.

這個api還可以設(shè)置對齊方法，選擇將input放在屏幕的上方/下方，類似的api還有:Element.scrollIntoViewIfNeeded()，這兩個是解決同一個問題的，選擇一個用就可以了。

控制input顯/隱密碼

這個就很簡單了，只需更改input的type屬性值就可以了?？梢钥匆幌耤odepen的demo   

 
 
 
 
    
  
  
  
  
  1. //點(diǎn)擊函數(shù)，獲取dom，判斷更改屬性。  
    2. 
  
  
  
  
  2.     show(){  
    3. 
  
  
  
  
  3.         let input=document.getElementById("inputId");   
    4. 
  
  
  
  
  4.         if(input.type=="password"){   
    5. 
  
  
  
  
  5.           input.type='text';  
    6. 
  
  
  
  
  6.         }else{  
    7. 
  
  
  
  
  7.           input.type='password';  
    8. 
  
  
  
  
  8.         }   
    9. 
  
  
  
  
  9.     } 
    10.

在input中輸入emoji表情導(dǎo)致請求失敗

現(xiàn)在用戶輸入emoji簡直已經(jīng)成為了習(xí)慣，如果前后端沒有對emoji表情進(jìn)行處理，那么用戶在上傳的時候，就會請求失敗。

通常這個問題是后端那邊處理比較合適的，前端是做不了這件事的，或者說很難做這件事。

之前看過一篇文章，這個文章里面講了怎么在上傳和拿數(shù)據(jù)下來的時候不會報錯，但是不能在顯示的時候轉(zhuǎn)換為表情。

ps:之前拿微信用戶名的時候，有些人可能在微信昵稱上面就會包含表情，如果后端沒對表情處理轉(zhuǎn)換，那么普通請求也會出錯。

之所以說這個，當(dāng)表單請求錯誤的時候各位如果實(shí)在找不到問題可以往這方面考慮一下，我真的被坑過的o(╥﹏╥)o。

textarea多行回車換行，顯示的時候換行設(shè)置：

在使用textarea 標(biāo)簽輸入多行文本的時候，如果沒有對多行文本顯示處理，會導(dǎo)致沒有換行的情況,就比如下面這種情況，用戶在textarea是有換行的。

Css屬性:white-space

white-space 屬性用于設(shè)置如何處理元素內(nèi)的空白，其中包括空白符和換行符。

只要在顯示內(nèi)容的地方將該屬性設(shè)置為white-space: pre-line或者white-space:pre-wrap，多行文本就可以換行了。

設(shè)置之后，顯示效果：

輸入框首尾清除空格-trim()

輸入框清除首尾空格是input較為常見的需求，通常在上傳的時候?qū)⑹孜部崭袢コ簟Ｒ话闶褂?字符串的原生方法trim() 從一個字符串的兩端刪除空白字符。

trim() 方法并不影響原字符串本身，它返回的是一個新的字符串。

原生清除方法:

 
 
 
 
    
  
  
  
  
  1. //原生方法獲取值，清除首尾空格上傳str2   
    2. 
  
  
  
  
  2. var str2 = document.getElementById("inputId").trim(); 
    3.

Vue清除方法：

Vue提供了修飾符刪除首尾空格， 加了修飾符.trim會自動過濾用戶輸入的首尾空白字符

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

在input中監(jiān)聽鍵盤事件

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

原生綁定:

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2. function keydownMsg(key) {  
    3. 
  
  
  
  
  3.        keyCode = key.keyCode; //獲取按鍵代碼  
    4. 
  
  
  
  
  4.        if (keyCode == 13) {  //判斷按下的是否為回車鍵  
    5. 
  
  
  
  
  5.            // 在input上監(jiān)聽到回車 do something  
    6. 
  
  
  
  
  6.        }  
    7. 
  
  
  
  
  7.    } 
    8.

Vue按鍵修飾符

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

結(jié)語

上述內(nèi)容就是我遇到的一些input問題的解決方式以及跟input相關(guān)的一些東西，如果有什么錯誤，歡迎指正！ 


網(wǎng)站標(biāo)題：關(guān)于input的一些問題解決方法分享
網(wǎng)站鏈接：http://www.5511xx.com/article/djjpedd.html