奇技淫巧：css實現整個表單只讀 form readonly

impig33 發布于2019-08-29 13:28 / 3739人閱讀

摘要：此處就不一一贅述。我說的方法只需要給表單加上一個類，就可以讓表單只讀。方法用給做個看不見的蒙版，遮住下面所有的元素，使之不響應任何事件方法用讓所有事件穿透關于屬性，可以看看這個介紹

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

我說的方法只需要給表單加上一個類，就可以讓表單只讀。

方法1: 用:before給form做個看不見的蒙版，遮住下面所有的元素，使之不響應任何事件

.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;
}

關于pointer-events屬性，可以看看這個介紹：https://segmentfault.com/a/11...

GPU云服務器云服務器提交整個表單 form表單校驗 form表單插件 form表單判斷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112626.html

奇技淫巧：css實現整個表單只讀 form readonly

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

時飛 2019-08-22 11:07 評論0 收藏0
表單中readonly的input等標簽，禁止光標進入（focus）的幾種方式

摘要：需求及問題描述在做移動端頁面，需要在訂單頁面中顯示表單數據，由于統一，所以就依舊采用的結構來寫結構，只讀數據的標簽自然要加，以為這樣就行了。測試中模擬移動端是看不出問題的。除此之外都表現完美，就我目前需求來看，也不需要什么事件。需求及問題描述在做移動端頁面，需要在訂單頁面中顯示表單數據，由于UI統一，所以就依舊采用form的結構來寫結構，只讀數據的標簽自然要加readonly=re...

Lowky 2019-08-30 15:53 評論0 收藏0
HTMl基礎

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

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

摘要：概述表單與其他頁面元素的作用不同。屬性用于指定服務器上用來處理表單數據的文件的。所謂控件，是對表單中用來收集數據的各種表單組件的通稱，包括文本框復選框單選按鈕等輸入類型。 1.概述表單與其他頁面元素的作用不同。其他元素是把服務器發過來的內容顯示給用戶，而表單則是把用戶的信息發送給服務器。 form 元素有兩個必要的屬性：action 和 method。action 屬性用于指定...

andot 2019-08-28 18:05 評論0 收藏0
HTML之body標簽中的相關標簽補充

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

felix0913 2019-04-23 11:49 評論0 收藏0