成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于input的一些問(wèn)題解決方法分享

騫諱護(hù) / 1320人閱讀

摘要：輸入框首尾清除空格在中監(jiān)聽(tīng)鍵盤事件移動(dòng)端底部被彈出的鍵盤遮擋輸入框是通過(guò)一直放在頁(yè)面底部，當(dāng)點(diǎn)擊進(jìn)行輸入的時(shí)候，就會(huì)出現(xiàn)如下圖片情況有的機(jī)型會(huì)遮擋一些。

前言

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

個(gè)人博客了解一下：obkoro1.com
本文內(nèi)容包括：

移動(dòng)端底部input被彈出的鍵盤遮擋。

控制input顯/隱密碼。

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

input多行輸入顯示換行。

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

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

移動(dòng)端底部input被彈出的鍵盤遮擋

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

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

在解決這個(gè)問(wèn)題的時(shí)候，有試過(guò)下面這種方法:

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

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

Element.scrollIntoView()

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

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

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

控制input顯/隱密碼

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

    //點(diǎn)擊函數(shù)，獲取dom，判斷更改屬性。
    show(){
        let input=document.getElementById("inputId");  
        if(input.type=="password"){ 
          input.type="text";
        }else{
          input.type="password";
        } 
    }
在input中輸入emoji表情導(dǎo)致請(qǐng)求失敗

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

通常這個(gè)問(wèn)題是后端那邊處理比較合適的，前端是做不了這件事的，或者說(shuō)很難做這件事。

之前看過(guò)一篇文章，這個(gè)文章里面講了怎么在上傳和拿數(shù)據(jù)下來(lái)的時(shí)候不會(huì)報(bào)錯(cuò)，但是不能在顯示的時(shí)候轉(zhuǎn)換為表情。

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

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

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

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

Css屬性:white-space

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

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

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

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

輸入框清除首尾空格是input較為常見(jiàn)的需求，通常在上傳的時(shí)候?qū)⑹孜部崭袢コ?。一般使?字符串的原生方法trim() 從一個(gè)字符串的兩端刪除空白字符。

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

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

Vue提供了修飾符刪除首尾空格， 加了修飾符.trim會(huì)自動(dòng)過(guò)濾用戶輸入的首尾空白字符

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

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

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

原生綁定: 
 
 function keydownMsg(key) {
        keyCode = key.keyCode; //獲取按鍵代碼
        if (keyCode == 13) {  //判斷按下的是否為回車鍵
            // 在input上監(jiān)聽(tīng)到回車 do something
        }
    }
Vue按鍵修飾符

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

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

希望看完的朋友可以點(diǎn)個(gè)喜歡/關(guān)注，您的支持是對(duì)我最大的鼓勵(lì)。

個(gè)人blog and 掘金個(gè)人主頁(yè)，如需轉(zhuǎn)載，請(qǐng)放上原文鏈接并署名。碼字不易，感謝支持！本人寫(xiě)文章本著交流記錄的心態(tài)，寫(xiě)的不好之處，不撕逼，但是歡迎指點(diǎn)。

如果喜歡本文的話，可以關(guān)注一下我剛開(kāi)的訂閱號(hào)，漫漫技術(shù)路，期待未來(lái)共同學(xué)習(xí)成長(zhǎng)。

以上2018.5.12

參考資料：

Element.scrollIntoView()

移動(dòng)前端手機(jī)輸入法自帶emoji表情字符處理

white-space

String.prototype.trim()

Vue按鍵修飾符

keyCode鍵碼值表

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94947.html

相關(guān)文章

  • 關(guān)于input的一些問(wèn)題解決方法分享

    摘要：輸入框首尾清除空格在中監(jiān)聽(tīng)鍵盤事件移動(dòng)端底部被彈出的鍵盤遮擋輸入框是通過(guò)一直放在頁(yè)面底部，當(dāng)點(diǎn)擊進(jìn)行輸入的時(shí)候，就會(huì)出現(xiàn)如下圖片情況有的機(jī)型會(huì)遮擋一些。 前言 input是我們接受來(lái)自用戶的數(shù)據(jù)常用標(biāo)簽，在前端開(kāi)發(fā)中，相信每個(gè)人都會(huì)用到這個(gè)標(biāo)簽，所以在開(kāi)發(fā)過(guò)程中也時(shí)候也會(huì)遇到一些問(wèn)題，本文的內(nèi)容是我在跟input相愛(ài)相殺過(guò)程中產(chǎn)生的，在此記錄分享一下。如果喜歡的話可以點(diǎn)波贊/關(guān)注，支持...

    vibiu 評(píng)論0 收藏0

  • 關(guān)于input的一些問(wèn)題解決方法分享

    摘要：輸入框首尾清除空格在中監(jiān)聽(tīng)鍵盤事件移動(dòng)端底部被彈出的鍵盤遮擋輸入框是通過(guò)一直放在頁(yè)面底部，當(dāng)點(diǎn)擊進(jìn)行輸入的時(shí)候，就會(huì)出現(xiàn)如下圖片情況有的機(jī)型會(huì)遮擋一些。 前言 input是我們接受來(lái)自用戶的數(shù)據(jù)常用標(biāo)簽，在前端開(kāi)發(fā)中，相信每個(gè)人都會(huì)用到這個(gè)標(biāo)簽，所以在開(kāi)發(fā)過(guò)程中也時(shí)候也會(huì)遇到一些問(wèn)題，本文的內(nèi)容是我在跟input相愛(ài)相殺過(guò)程中產(chǎn)生的，在此記錄分享一下。如果喜歡的話可以點(diǎn)波贊/關(guān)注，支持...

    chanjarster 評(píng)論0 收藏0

  • 前端常用代碼片段(五)

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

    MoAir 評(píng)論0 收藏0

  • 大規(guī)模應(yīng)用TypeScript「2019 JSConf -Brie Bunge」

    摘要：眾所周知，在大公司中進(jìn)行大的改革很難。目前公司有超過(guò)名開(kāi)發(fā)人員，其中有個(gè)以上是前端。從年起，已經(jīng)在一些小規(guī)模團(tuán)隊(duì)中探索使用。在年的前端調(diào)查中，靜態(tài)類型系統(tǒng)呼聲最高。在我們的主倉(cāng)庫(kù)中，絕大多數(shù)的公共依賴都已經(jīng)由做到了類型聲明。 特別說(shuō)明 這是一個(gè)由simviso團(tuán)隊(duì)進(jìn)行的關(guān)于Airbnb大規(guī)模應(yīng)用TypeScript分享的翻譯文檔，分享者是Airbnb的高級(jí)前端開(kāi)發(fā)Brie Bunge ...

    qpal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<