奇技淫巧：css實(shí)現(xiàn)整個(gè)表單只讀 form readonly

impig33 發(fā)布于2019-08-29 13:28 / 3756人閱讀

摘要：此處就不一一贅述。我說(shuō)的方法只需要給表單加上一個(gè)類(lèi)，就可以讓表單只讀。方法用給做個(gè)看不見(jiàn)的蒙版，遮住下面所有的元素，使之不響應(yīng)任何事件方法用讓所有事件穿透關(guān)于屬性，可以看看這個(gè)介紹

一般的方法往往給表單的各個(gè)input、select等加上readonly，但是這個(gè)方法有很多缺點(diǎn)。此處就不一一贅述。

我說(shuō)的方法只需要給表單加上一個(gè)類(lèi)，就可以讓表單只讀。

方法1: 用:before給form做個(gè)看不見(jiàn)的蒙版，遮住下面所有的元素，使之不響應(yīng)任何事件

.form-readonly{
    position: relative;
}
.form-readonly:before{
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

方法2: 用pointer-events:none, 讓所有事件穿透form

.form-readonly{
    pointer-events:none;
}

關(guān)于pointer-events屬性，可以看看這個(gè)介紹：https://segmentfault.com/a/11...

GPU云服務(wù)器云服務(wù)器提交整個(gè)表單 form表單校驗(yàn) form表單插件 form表單判斷

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

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

相關(guān)文章

奇技淫巧：css實(shí)現(xiàn)整個(gè)表單只讀 form readonly

摘要：此處就不一一贅述。我說(shuō)的方法只需要給表單加上一個(gè)類(lèi)，就可以讓表單只讀。方法用給做個(gè)看不見(jiàn)的蒙版，遮住下面所有的元素，使之不響應(yīng)任何事件方法用讓所有事件穿透關(guān)于屬性，可以看看這個(gè)介紹一般的方法往往給表單的各個(gè)input、select等加上readonly，但是這個(gè)方法有很多缺點(diǎn)。此處就不一一贅述。我說(shuō)的方法只需要給表單加上一個(gè)類(lèi)，就可以讓表單只讀。方法1: 用:before給fo...

時(shí)飛 2019-08-22 11:07 評(píng)論0 收藏0
表單中readonly的input等標(biāo)簽，禁止光標(biāo)進(jìn)入（focus）的幾種方式

摘要：需求及問(wèn)題描述在做移動(dòng)端頁(yè)面，需要在訂單頁(yè)面中顯示表單數(shù)據(jù)，由于統(tǒng)一，所以就依舊采用的結(jié)構(gòu)來(lái)寫(xiě)結(jié)構(gòu)，只讀數(shù)據(jù)的標(biāo)簽自然要加，以為這樣就行了。測(cè)試中模擬移動(dòng)端是看不出問(wèn)題的。除此之外都表現(xiàn)完美，就我目前需求來(lái)看，也不需要什么事件。需求及問(wèn)題描述在做移動(dòng)端頁(yè)面，需要在訂單頁(yè)面中顯示表單數(shù)據(jù)，由于UI統(tǒng)一，所以就依舊采用form的結(jié)構(gòu)來(lái)寫(xiě)結(jié)構(gòu)，只讀數(shù)據(jù)的標(biāo)簽自然要加readonly=re...

Lowky 2019-08-30 15:53 評(píng)論0 收藏0
HTMl基礎(chǔ)

摘要：每個(gè)表格均有若干行由標(biāo)簽定義，每行被分割為若干單元格由標(biāo)簽定義。字母指表格數(shù)據(jù)，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本圖片列表段落表單水平線表格等等。表格最重要的目的是顯示表格類(lèi)數(shù)據(jù)。規(guī)定在提交表單時(shí)所用的方法默認(rèn)。 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STRE...

番茄西紅柿 2019-04-23 13:42 評(píng)論0 收藏0
CSS學(xué)習(xí)筆記(十) 界面組件之表單

摘要：概述表單與其他頁(yè)面元素的作用不同。屬性用于指定服務(wù)器上用來(lái)處理表單數(shù)據(jù)的文件的。所謂控件，是對(duì)表單中用來(lái)收集數(shù)據(jù)的各種表單組件的通稱(chēng)，包括文本框復(fù)選框單選按鈕等輸入類(lèi)型。 1.概述表單與其他頁(yè)面元素的作用不同。其他元素是把服務(wù)器發(fā)過(guò)來(lái)的內(nèi)容顯示給用戶(hù)，而表單則是把用戶(hù)的信息發(fā)送給服務(wù)器。 form 元素有兩個(gè)必要的屬性：action 和 method。action 屬性用于指定...

andot 2019-08-28 18:05 評(píng)論0 收藏0
HTML之body標(biāo)簽中的相關(guān)標(biāo)簽補(bǔ)充

摘要：一列表標(biāo)簽列表標(biāo)簽分為三種。二表格標(biāo)簽表格標(biāo)簽用表示。單元格和單元格之間的距離外邊距，像素為單位。例如表示當(dāng)前單元格在水平方向上要占據(jù)兩個(gè)單元格的位置。輸入標(biāo)簽文本框輸入標(biāo)簽文本框用于接收用戶(hù)輸入。一列表標(biāo)簽　　列表標(biāo)簽分為三種。　　1、無(wú)序列表，無(wú)序列表中的每一項(xiàng)是　　　　英文單詞解釋如下：　　　　　　a.ul：unordered list，無(wú)序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 評(píng)論0 收藏0