我的 Input框 不可能這麼可愛

来源:https://www.cnblogs.com/wadhf/archive/2019/12/02/11973745.html

<input /> 標簽是我們日常開發中非常常見的替換元素了,但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性,選擇器都沒怎麼用過,所以就開篇文章來整理一下一些比較有趣或者實用的知識點。 本篇文章預設大家已經知道 <input /> 標簽的基本用法,不會 ...


<input /> 標簽是我們日常開發中非常常見的替換元素了,但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性,選擇器都沒怎麼用過,所以就開篇文章來整理一下一些比較有趣或者實用的知識點。
 
本篇文章預設大家已經知道 <input /> 標簽的基本用法,不會做過多的基礎說明~
 
by
 
沒想到,這些選擇器居然跟 input …
(根據最新的 drafts 指出,一共有3大類,16種跟 input 相關的選擇。其實都挺有用的,善用它們,會讓我們的用戶體驗更加美好。)
 
下麵我們來分享一下這3大類選擇器的作用:
 
se
 
第一類:控制系(Input Control States)
圖片

第二類:輸出系(Input Value States)
圖片

第三類:偵查系(Input Value-checking)
圖片

可怕,除了選擇器,居然還跟這些屬性有關係
<input> 除了有很多相關的選擇器,結合不同的type還有不同的屬性可以供使用。他們的作用如下:
圖片

 
實戰
通過上面的三類說明,我們大致瞭解了 <input /> 標簽的相關信息,但是你們以為我是來列list的嗎?
 
當然不是,還有實操啊~
 
 
純CSS實現表單提交功能
首先我們來看個效果圖
 
 
上面的效果就是一個純CSS實現的表單提交功能,這是怎麼實現的呢?下麵我們直接看源碼,然後一步一步地來分拆(不想看的可以直接CV下麵的源碼自己做測試~)
<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
    input[type="text"]:invalid ~ input[type="submit"],
    input[type="password"]:invalid ~ input[type="submit"] {
      display: none;
    }
    input[required]:focus:invalid + span {
      display: inline;
    }
    input[required]:empty + span {
      display: none;
    }
    input[required]:invalid:not(:placeholder-shown) + span {
      display: inline;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">
    賬號:
   <input data-title="賬號" placeholder="請輸入正確的賬號" pattern="\w{6,10}"
    name="account" type="text" required />
    <span class="f-tips">請輸入正確的賬號</span>
    <br />
    密碼:
    <input data-title="密碼" placeholder="請輸入正確的密碼" pattern="\w{6,10}"
    name="password" type="password" required />
    <span class="f-tips">請輸入正確的密碼</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>

 


 
 
第一步:寫好基礎結構
首先我們來把基礎結構給寫好,代碼如下:
 
<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">
    賬號:
    <input data-title="賬號" placeholder="請輸入正確的賬號" pattern="\w{6,10}"
    name="account" type="text" required />
    <span class="f-tips">請輸入正確的賬號</span>
    <br />
    密碼:
    <input data-title="密碼" placeholder="請輸入正確的密碼" pattern="\w{6,10}"
    name="password" type="password" required />
    <span class="f-tips">請輸入正確的密碼</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>

 


 
掃一眼,嗯,挺簡單的,都是常用的東西。咦,不對,這個 pattern 是什麼東西?
 
在這裡我們重點分享下 pattern 這個屬性,這是一個用來驗證 input[value] 是否合法的屬性,裡面的內容就是匹配value的,語法便是正則的語法,例子如下:
<label>
    <!--
     當前pattern的內容就是驗證input[name="part"]的value的,
      其規則如同裡面的正則一樣,匹配input[name="part"]的value是否是一個數字+3個大寫字母
    -->
    <input pattern="[0-9][A-Z]{3}" name="part" />
</label>

 


 
 
當然,不同的 input[type] 也會預設帶有相應的 pattern ,例如 input[type="email"] 就是預設匹配了以下規則:
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

 


 
第二步:重點功能
 

input[type="text"]:invalid ~ input[type="submit"],
input[type="password"]:invalid ~ input[type="submit"] {
    display: none;
}
input[required]:focus:invalid + span {
    display: inline;
}
input[required]:empty + span {
    display: none;
}
input[required]:invalid:not(:placeholder-shown) + span {
    display: inline;
}

 

  
上面便是核心交互的實現。
 
首先第一個class就是保證了在兩個輸入框不通過的時候隱藏,就是當輸入框值為空或者不符合驗證規則,則隱藏提交按鈕。
 
第二個,第三個class則是控制當用戶在輸入框輸入內容時,如果不符合驗證規則,則顯示錯誤信息,否則則隱藏。
 
第四個class則是用過 placeholder 是否存在來控制錯誤信息的顯隱,如果 placeholder 不顯示,則證明用戶正在輸入,錯誤信息則根據用戶輸入的值來判斷是否顯隱,否則則隱藏。
 
狀態切換
上面我們有提到一個選擇器 :indeterminate ,這個是用於選擇狀態不確定的表單元素與 <progress> ,玩過掃雷的人都知道,右擊除了可以選擇紅旗,還可以選擇問號,就是選中,但不確定;又跟 promise 的 pending 狀態類型,介於 resolve 與 reject 之間。
 
多了 :indeterminate 會給我們帶來很多很有趣的體驗。
 
首先我們來看看它的使用案例。
 
基礎使用法
先看效果
 
 
代碼如下:
 

<style>
    body {
        background: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    input {
        margin-right: .25em;
        width: 30px;
        height: 30px;
    }
    label {
        position: relative;
        top: 1px;
        font-size: 30px;
    }
</style>
<form>
    <input type="checkbox" id="checkbox">
    <label for="option">點擊左邊</label>
</form>
<script>
      'use strict';
      checkbox.addEventListener('click', ev => {
        if (ev.target.readOnly) {
          ev.target.checked = ev.target.readOnly = false;
        } else if (!ev.target.checked) {
          ev.target.readOnly = ev.target.indeterminate = true;
        };
      });
</script>

 


 
這裡面其實沒有什麼複雜的實現,只是做了個中間態的判斷,就非常輕鬆的實現了radio的三種狀態切換。
 
秀到頭皮發麻法
先看效果
 
 
輸入框綁定的可選值
先看效果
 
 
其實代碼很簡單:
<input type="text" list="names" multiple />
<datalist id="names">
    <option value="kris">
    <option value="陳大魚頭">
    <option value="深圳金城武">
</datalist>
 
<input type="email" list="emails" multiple />
<datalist id="emails">
    <option value="[email protected]" label="kris">
    <option value="[email protected]" label="kris">
</datalist>
 
<input type="date" list="dates" />
<datalist id="dates">
    <option value="2019-09-03">
</datalist>

 


 
這裡原理就是通過 <input list="dates" /> 來綁定需要下拉顯示的數據列表 <datalist id="dates"> 。
 
那麼當我們要實現輸入聯想的時候,也可以通過修改 <datalist id="dates"> 的子元素來實現,而不是再寫一大堆的操作函數來實現。
 
總結
其實 <input /> 標簽還有很多有趣的功能是可以挖掘的,不同的類型,結合不同的選擇器與屬性,是可以有更多讓人為之驚嘆的體驗的
 






您的分享是我們最大的動力!

更多相關文章
  • 使用SQL語句修改Mysql資料庫字元集的方法 修改庫: alter database [$database] character set [$character_set] collate [$collation_name] 註:[$database]為資料庫的庫名。[$character_set] ...
  • 2019年8月5日18:39:06 10.20.100.21rootbayaim 01-Docker介紹 docker -- go 語言編寫一次運算,到處運行只能 運行在linux 64位系統 docker 組成: (後臺進程) 1.鏡像(image) 2.容器(container) 3.倉庫(re ...
  • mysqladmin是一個執行管理操作的客戶端程式。它可以用來檢查伺服器的配置和當前狀態、創建和刪除資料庫等。 mysqladmin工具的使用格式:mysqladmin [option] command [command option] command ...... 1.查看mysql的安裝目錄,進 ...
  • #菜鳥教程地址https://www.runoob.com/docker/docker-tutorial.html#docker官方地址倉庫https://hub.docker.com/ docker 安裝 1.更新內核yum update2.下載安裝腳本curl -fsSL https://get ...
  • 項目是一個即時聊天的社交軟體,聊天流採用的是UICollectionView,隨著進度的完善,發現一個特別的bug,UICollectionviewCell的復用,並沒有直接insert進去,而是出現了莫名奇妙的插入方式, 這不是我的圖,這是我在網上找到的,跟我的效果一樣一樣的。link the i ...
  • 寫這篇文章的原因 在移動端一般很少使用複雜的表單,一般針對於屬性的更改都會打開一個新的頁面進行更改。雖然不多,但是也會有。如果一個頁面要輸入的內容包括姓名、地址、郵箱、手機號等,對各個屬性的驗證會非常麻煩,並且非常的不優雅。 於是, 就出現了,一種基於規則的 輸入驗證庫,通過註解即可標註驗證規則。 ...
  • 背景 因為公司一個app項目需要擴展,因為功能較多且較完整的流程與業務,而且和以前的業務關係不大,所以我整合到了 另外一個分包中(代號:newFunc,請註意是代號)進行依賴。 當我寫完這部分業務開始進行debug的時候我發現了這個錯誤。 上述中我得出already這個關鍵字,在對分包的集成測試中沒 ...
  • 下載 "demo和工具下載鏈接SPClipTool" 使用說明 需求 圖片裁剪,效果如下圖,支持圖片拖拽,縮放,裁剪框自由變換大小。 思路 兩個UIImageView,一個做背景,並加上蒙版效果,另外一個通過蒙版控制顯示區域,並且保證兩個UIImageView平移和縮放的時候完全重疊。最後使用一個U ...
一周排行
  • 本文將介紹如何在.NET Core3環境下使用MVVM框架Prism的使用區域管理器對於View的管理 一.區域管理器 我們在之前的Prism系列構建了一個標準式Prism項目,這篇文章將會講解之前項目中用到的利用區域管理器更好的對我們的View進行管理,同樣的我們來看看官方給出的模型圖: 現在我們 ...
  • 前言: gRPC預設是ProtoFirst的,即先寫 proto文件,再生成代碼,需要人工維護proto,生成的代碼也不友好,所以出現了gRPC CodeFirst,下麵來說說我們是怎麼實現gRPC CodeFirst 目錄: 實現和WCF一樣的CodeFirst (1). 實現gRPC CodeF ...
  • [toc] 1.背景 接上篇文章 "深入淺出C 結構體——封裝乙太網心跳包的結構為例" ,使用結構體性能不佳,而且也說明瞭原因。本篇文章詳細描述了以類來封裝網路心跳包的優缺點,結果大大提升瞭解析性能。 2.用類來封裝乙太網心跳包的優缺點 2.1.優點 + 可以在類里直接new byte[],即直接實 ...
  • VS2013如何轉成VS2010且不會出現此項目與Visual Studio的當前版本不相容的報錯 解決方法: 1.用記事本打開解決方案文件“解決方案名.sln”,然後修改最上面兩行為如下代碼:Microsoft Visual Studio Solution File, Format Version ...
  • 傳遞數據至部分視圖: 在ps.cshtml中get到上面高亮的參數: ...
  • 三、C#數據類型 3.1.變數 聲明->賦值->使用 作用域:變數作用域為包含它的大括弧內 3.2.常量 1)const 數據類型 常量名稱 = 常量值 聲明常量時一定要賦值 2)@作用 輸出轉義字元 @"Hello World\n" 讓字元串換行 關鍵字用作標識符 @namespace @clas ...
  • 四、C#表達式與運算符 4.1.表達式 操作數+運算符 4.2.數學運算符 var++ 先用後加 ++var 先加後用 4.3.賦值運算符 略 4.4.關係運算符 結果只會是bool類型 1)對象的不同 數值類型比較兩個數的大小 字元類比較Unicode編碼大小,'A'=65 'a'=97 '0'= ...
  • 下麵的靜態代碼中: 現在想把箭頭所指的值,改為動態。 根據不同條件,它將有可能是1,或是3或是2或是5等。 ...
  • 使用Xaml+C#,使WPF/UWP運行在Linux和Mac上 ...
  • 前言 C 的lambda和Linq可以說是一大亮點,C 的Lambda無處不在,Linq在數據查詢上也有著舉足輕重的地位。 那麼什麼是Linq呢,Linq是 (語言集成查詢)的縮寫,可以對本地對象 集合 或者遠程數據源進行結構化的查詢操作。 那什麼又是Lambda呢?嗯,簡單來講就是匿名函數,我們不 ...
x