Zi 字媒體

說到表單元素的readonly和disabled屬性，大家應該不會感覺到陌生吧，畢竟在日常的前端開發中，經常會遇到禁止用戶更改表單中值的場景。但是如果你能一看到這個標題，腦海中就浮現出這兩個屬性的差異，那麼恭喜你，你已經掌握了這兩個概念沒必要繼續往下看了。但是如果你和我一樣對這兩個概念比較模糊的話，那麼請繼續往下看。disabled來自MDN的文檔是這麼描述disabled屬性的：This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.現代瀏覽器都支持disabled屬性，,,,,SELECT, 和TEXTAREA（IE下，其他非form元素也支持這個屬性）都支持這個屬性。應用到這個屬性的表單元素將有以下行為：無法獲得輸入焦點不能觸發onclick事件;使用tab鍵切換焦點時會跳過此類元素;用戶在頁面上無法更改該元素的值，但可以通過腳本更改其值;提交表單時會忽略該元素的值;W3C的文檔中還提到,disabled屬性的值可以是繼承而來,元素上disabled屬性會覆蓋繼承來的值。但在IE和Chorme下，對此的表現完全不同。在上面的栗子中，我們給form元素添加了disabled屬性,標準實現的瀏覽器會直接忽略這個屬性。然而在IE下面，其行為則非常詭異。在IE（8,9,10,11）中,表單中的元素繼承了form的disabled屬性（但和標準的disabled屬性行為有所不同）。所有的表單元素都呈現出禁用時的樣式，但input可以獲得焦點，並且用戶在頁面可以更改其值;button也可以點擊。至於tab切換焦點，由於給form設置了disabled，所以tab切換時會忽略整個form。readonlyWhen set for a form control, this boolean attribute prohibits changes to the control.readonly則容易理解的多，從字面意思可以知道使用了該屬性的元素的值是只讀的。只有input(『輸入系』的input才生效，radio和CheckBox等不會生效)和textarea支持該屬性。相比disable屬性的元素而言，readonly屬性的元素可以接收焦點，而且tab切換焦點時不會忽略此元素，提交表單時也會將其提交。IE和chorme對待readonly屬性的元素有點差異。在IE中，readonly的input輸入框中會出現可以移動的游標，在chorme下則不會出現游標。總結readonly和disable都可以禁止用戶在頁面上更改form表單的內容,但都可以通過腳本更改其值。這兩個屬性各有各的用途，例如在一個編輯產品的form中,我們需要將產品ID展示出來，但不允許用戶更改其值，這個時候我們就可以將ID這個表單元素設為readonly，因為我們還需要將ID對應的值傳遞給後台。大家都應該做過這樣的事情，考慮到網路情況較差的情況下，在用戶提交表單后，將提交按鈕置為disabled,避免用戶多次提交表單。上面兩種情況只是readonly和disabled的常用用法。在開發中要視情況而定用哪個屬性。若有不足之處，請指出。