如何disabled禁用所有表單input輸入框元素

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

一、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]屬性嗎？

有！

二、fieldset元素輕松實現

其實，要真正意義上禁用所有的表單元素很簡單，嵌套在<fieldset>元素中，然后設置<fieldset>元素disabled就可以了，代碼示意如下：

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

回家吧，結束了！

Let’s go home! It’s over!

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

Firefox瀏覽器下：

Edge瀏覽器下：

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

然后，IE瀏覽器（包括Edge）下有個瑕疵，那就是UI樣式上雖然禁用了，鍵盤也無法響應，但是，輸入框內容居然可以輸入，而且表單的提交行為居然也可以點擊觸發，有些不完美，怎么辦呢？

可以再輔助下面的CSS：

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

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

有人要問如果我要兼容IE8，IE9瀏覽器怎么辦？

那使用偽元素創建一個浮層覆蓋在所有表單元素上面，就是一開始提到的覆蓋方法，具體代碼不重復展示。

於是，雙管齊下，表單所有元素禁用就這樣完美搞定了。

您可以狠狠地點擊這里：一次性禁用所有的表單元素demo

四、結束語

第五屆CSS大會上的演講內容將會分系列和一個匯總依次介紹，等不及的小伙伴可以訪問這里我的分享視頻。

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

最后，關於fieldset元素，推薦閱讀我之前寫的這篇文章：“fieldset,legend元素及CSS布局應用”，相信會有所收獲的。

好的，就說這么多！

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