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

2022-07-07 00:18:14 字數 2276 閱讀 8237

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

控制input顯/隱密碼。

在input中輸入emoji表情導致請求失敗。

input多行輸入顯示換行。

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

在input中監聽鍵盤事件

input輸入框是通過position:fixed一直放在頁面底部,當點選input進行輸入的時候,就會出現如下情況(有的機型會遮擋一些)。

當時這個問題是去年在ios中遇到的,在最新版的ios系統中,貌似解決了這個bug,但是為了向下相容以及防止其他其他機型也出現這個問題,大家可以稍微記一下這個解決方法。

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

在input的focus事件中,開啟乙個定時器,然後每隔300毫秒進行一次document.body.scrolltop=document.body.scrollheight的調整,執行3次即可。

element.scrollintoview()

element.scrollintoview():方法讓當前的元素滾動到瀏覽器視窗的可視區域內

document.queryselector('#inputid').scrollintoview();

//只要在input的點選事件,或者獲取焦點的事件中,加入這個api就好了

這個api還可以設定對齊方法,選擇將input放在螢幕的上方/下方,類似的api還有:element.scrollintoviewifneeded(),這兩個是解決同乙個問題的,選擇乙個用就可以了。

這個就很簡單了,只需更改input的type屬性值就可以了。可以看一下codepen的demo

//點選函式,獲取dom,判斷更改屬性。

show()else

}

現在使用者輸入emoji簡直已經成為了習慣,如果前後端沒有對emoji表情進行處理,那麼使用者在上傳的時候,就會請求失敗。

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

之前看過一篇文章,這個文章裡面講了怎麼在上傳和拿資料下來的時候不會報錯,但是不能在顯示的時候轉換為表情。

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

在使用textarea標籤輸入多行文字的時候,如果沒有對多行文字顯示處理,會導致沒有換行的情況,就比如下面這種情況,使用者在textarea是有換行的。

css屬性:white-space

white-space 屬性用於設定如何處理元素內的空白,其中包括空白符和換行符。

只要在顯示內容的地方將該屬性設定為white-space: pre-line或者white-space:pre-wrap,多行文字就可以換行了

輸入框清除首尾空格是input較為常見的需求,通常在上傳的時候將首尾空格去除掉。一般使用:字串的原生方法trim() 從乙個字串的兩端刪除空白字元。

trim() 方法並不影響原字串本身,它返回的是乙個新的字串。

原生清除方法:

//原生方法獲取值,清除首尾空格上傳str2 

var str2 = document.getelementbyid("inputid").trim();

vue清除方法:

vue提供了修飾符刪除首尾空格, 加了修飾符.trim會自動過濾使用者輸入的首尾空白字元

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

在使用者登入或者搜尋框的時候,一般都會監聽鍵盤事件繫結回車按鍵,來執行登入/搜尋 等操作。

原生繫結:

function keydownmsg(key) 

}

vue按鍵修飾符

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

如果你覺得自己去搭建sentry系統過於複雜,可以使用國內類似的saas產品fundebug,fundebug有免費的基礎版本。

Linux vim一些問題解決

1.按 i 後,沒有出現insert 解決方法 在vimrc檔案中,加入set showmode 2.backspace鍵不能刪除,同時方向鍵在insert模式下會打出abcd 解決方法 在vimrc檔案中,加入set nocompatible 3.backspace在insert模式下不能刪除空行...

ubuntu的一些問題解決

引用 http dx.ylmf.net read.php?tid 1085946 fpage 0 toread uid 722851 page 1 解決問題 知識所在樓層及內容 1.ubuntu是什麼?2.零命令玩轉ubuntu 8.10 livecd光碟安裝篇 3.什麼是wine? 4.零命令玩轉...

關於input框,遇到的一些問題以及解決方法

1 css去掉谷歌瀏覽器的黃色背景 input webkit autofill webkit box shadow 0 0 0px 1000px white inset 2 限制input框輸入的字元長度 maxlength 屬性 例 input框只能輸入10個字元 3 input禁止輸入 read...