如何disabled禁用全部表單input輸入框元素

轉載地址：https://www.zhangxinxu.com/wordpress/?p=8568

1、pointer-events:none和覆蓋層方法的問題

常常會遇到需求，須要禁用div中或者form元素中一堆表單控件元素，如<input>，<select>，<textarea>元素。

不少人用的下面這兩種方法實現：

1. 設置pointer-events:none，該聲明不瞭解可參見「CSS3 pointer-events:none應用舉例及擴展」這篇文章。例如：

   form {
     pointer-events: none;
   }

2. 使用::before僞元素建立一個浮層該在全部的表單元素上，例如：

   form {
     position: relative;
   }
   form::before {
     content: '';
     position: absolute;
     left: 0; right: 0; top: 0; bottom: 0;
     background-color: rgba(0,0,0,.001);
   }

以上兩個方向雖然可讓點擊無效，可是並無阻止鍵盤訪問，也就是Tab鍵索引，或者回車都能觸發表單行爲，使用new FormData(form)也能獲取表單控件值，並非真正意義上禁用，問題很大。

那有沒有什麼簡單方法輕鬆禁用全部表單元素呢？難道真要遍歷全部的控件元素再設置[disabled]屬性嗎？

有！

2、fieldset元素輕鬆實現

其實，要真正意義上禁用全部的表單元素很簡單，嵌套在<fieldset>元素中，而後設置<fieldset>元素disabled就能夠了，代碼示意以下：

<form>
    <fieldset disabled>
        <legend>表單標題</legend>
        <...>
    </fieldset>
</form>

回家吧，結束了！

Let’s go home! It’s over!

下圖是Chrome瀏覽器下的效果：

Firefox瀏覽器下：

Edge瀏覽器下：

3、IE瀏覽器的瑕疵和解決

而後，IE瀏覽器（包括Edge）下有個瑕疵，那就是UI樣式上雖然禁用了，鍵盤也沒法響應，可是，輸入框內容竟然能夠輸入，並且表單的提交行爲竟然也能夠點擊觸發，有些不完美，怎麼辦呢？

能夠再輔助下面的CSS：

fieldset[disabled] {
   -ms-pointer-events: none;
   pointer-events: none;
}

IE10+瀏覽器均可以完美禁用。

有人要問若是我要兼容IE8，IE9瀏覽器怎麼辦？

那使用僞元素建立一個浮層覆蓋在全部表單元素上面，就是一開始提到的覆蓋方法，具體代碼不重複展現。

因而，左右開弓，表單全部元素禁用就這樣完美搞定了。

您能夠狠狠地點擊這裏：一次性禁用全部的表單元素demo

4、結束語

第五屆CSS大會上的演講內容將會分系列和一個彙總依次介紹，等不及的小夥伴能夠訪問這裏個人分享視頻。

我手上目前還有其餘活，預計清明節後陸續更新，稍安……

最後，關於fieldset元素，推薦閱讀我以前寫的這篇文章：「fieldset,legend元素及CSS佈局應用」，相信會有所收穫的。

好的，就說這麼多！

感謝閱讀，歡迎交流，也歡迎朋友圈分享。