成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

表單密碼自動(dòng)填充hack

zollero / 3551人閱讀

摘要：甚至不分青紅皂白，每個(gè)頁(yè)面只要有類(lèi)型的輸入框，就會(huì)自動(dòng)填充。請(qǐng)輸入密碼對(duì)于瀏覽器，如果頁(yè)面上有兩個(gè)以上的類(lèi)型輸入框，自動(dòng)填充的時(shí)候只會(huì)填充第一個(gè)以及改輸入框的上一個(gè)，分別填充賬號(hào)和密碼。

前言

寫(xiě)前端的，最討厭的事有幾個(gè)，其中一個(gè)就是用戶/自己輸入的密碼被瀏覽器記住之后，每次打開(kāi)頁(yè)面都會(huì)自動(dòng)填充。甚至不分青紅皂白，每個(gè)頁(yè)面只要有password類(lèi)型的輸入框，就會(huì)自動(dòng)填充。尤其是chrome。

不僅煩人，有時(shí)候還會(huì)影響樣式，比如chrome下，輸入框帶有背景icon，但是自動(dòng)填充會(huì)變成黃色背景，你的背景icon沒(méi)了……

怎么辦？

解決辦法

網(wǎng)上有很多hack的辦法，有的用js控制輸入框類(lèi)型，有的定時(shí)器清除輸入框的值，但是都不太好用。

經(jīng)過(guò)研究/測(cè)試，發(fā)現(xiàn)了一種很簡(jiǎn)單的hack方法，純css+html，不影響頁(yè)面布局，不需要js，穩(wěn)定，效果很棒。

CSS 
.hide-input{
    width: 0;
    height: 0;
    position: absolute;
    top: -100000px;
    opacity: 0;
}
HTML

對(duì)于chrome瀏覽器，如果頁(yè)面上有兩個(gè)以上的password類(lèi)型輸入框，自動(dòng)填充的時(shí)候只會(huì)填充第一個(gè)以及改輸入框的上一個(gè)，分別填充賬號(hào)和密碼。

但是前提是該password輸入框必須是可見(jiàn)的，不能是display: none;或者visibility: hidden;，所以，對(duì)于需要隱藏的輸入框，我們?cè)O(shè)置寬度為0，高度為0，透明度為0，絕對(duì)定位，在頁(yè)面上方很高的位置，這樣的設(shè)置，既保證了該元素的可見(jiàn)性，又確保不會(huì)因?yàn)橐馔舛绊懙巾?yè)面的其他元素。

結(jié)語(yǔ)

這樣的寫(xiě)法，有些累贅。但是如果做成組件，就很方便了。
現(xiàn)在前端框架都是組件化的，我們完全可以把password輸入框做成一個(gè)組件，使用起來(lái)不就很方便了嗎？

希望能給你一點(diǎn)幫助！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53726.html

相關(guān)文章

  • 表單密碼自動(dòng)填充hack

    摘要：甚至不分青紅皂白，每個(gè)頁(yè)面只要有類(lèi)型的輸入框，就會(huì)自動(dòng)填充。請(qǐng)輸入密碼對(duì)于瀏覽器，如果頁(yè)面上有兩個(gè)以上的類(lèi)型輸入框，自動(dòng)填充的時(shí)候只會(huì)填充第一個(gè)以及改輸入框的上一個(gè)，分別填充賬號(hào)和密碼。 前言 寫(xiě)前端的，最討厭的事有幾個(gè)，其中一個(gè)就是用戶/自己輸入的密碼被瀏覽器記住之后，每次打開(kāi)頁(yè)面都會(huì)自動(dòng)填充。甚至不分青紅皂白，每個(gè)頁(yè)面只要有password類(lèi)型的輸入框，就會(huì)自動(dòng)填充。尤其是chro...

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

  • 如何禁止瀏覽器自動(dòng)填充

    摘要：所以，這里給設(shè)置初始為，在用戶點(diǎn)擊聚焦后設(shè)置為，避免瀏覽器在頁(yè)面之后判斷登錄表單進(jìn)行回填。 本文由 Deguang 發(fā)表于 碼路-技術(shù)博客 瀏覽器的保存賬戶密碼功能，給我們帶來(lái)了很大的便利，但是在有些情況下，我們并不希望瀏覽器幫我們填充一些表單，然而autocomplete的一些參數(shù)項(xiàng)并不能阻止瀏覽器回填，這里我們來(lái)看下如何解決這個(gè)問(wèn)題。 問(wèn)題描述： 項(xiàng)目注冊(cè)部分的表單有三項(xiàng)，分別為手...

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

  • Laravel 5系列教程七：表單驗(yàn)證 Validation

    摘要：幾乎在每一個(gè)應(yīng)用當(dāng)中都會(huì)有表單，而有表單基本就離不開(kāi)表單驗(yàn)證。在中，其實(shí)可以說(shuō)是有兩種方式來(lái)進(jìn)行表單驗(yàn)證使用和使用。然后，上面的驗(yàn)證規(guī)則是對(duì)于和兩個(gè)字段，我們需要用戶為其填充內(nèi)容，不能為空。 原文來(lái)自：https://laravist.com/article/15 免費(fèi)視頻教程地址 https://laravist.com/series/laravel-5-basic Laravis...

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

  • 前端面試題2（CSS）

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見(jiàn) 區(qū)別： display:none;會(huì)讓元素完全從渲染樹(shù)中消失，渲染的時(shí)候不占據(jù)任...

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

  • 前端面試題2（CSS）

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見(jiàn) 區(qū)別： display:none;會(huì)讓元素完全從渲染樹(shù)中消失，渲染的時(shí)候不占據(jù)任...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<