html input readonly 和 disable的區別

時間 2019-11-08

標籤 html input readonly disable 區別欄目 HTML 简体版

原文原文鏈接

Readonly和Disabled它們都可以作到使用戶不可以更改表單域中的內容。可是它們之間有着微小的差異，總結以下： javascript

Readonly只針對input(text / password)和textarea有效，而disabled對於全部的表單元素都有效，可是表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去（readonly接受值更改能夠回傳，disable接受改但不回傳數據）。 html

通常比較經常使用的狀況是： java

1. 在某個表單中爲用戶預填了某個惟一識別代碼，不容許用戶改動，可是在提交時須要傳遞該值，此時應該將它的屬性設置爲readonly。

2. 常常遇到當用戶正式提交了表單後須要等待管理員的信息驗證，這就不容許用戶再更改表單中的數據，而是隻可以查看，因爲disabled的做用元素範圍大，因此此時應該使用disabled，但同時應該注意的是要將submit button也disabled掉，不然只要用戶按了這個按鈕，若是在數據庫操做頁面中沒有作完整性檢測的話，數據庫中的值就會被清除。若是說在這種狀況下用readonly來代替disabled的話，若表單中只有input(text / password)和textarea元素，那仍是能夠的，若是存在其餘發元素，好比select，用戶能夠在從新改寫值後按回車鍵進行提交(回車是默認的submit觸發按鍵)。

3. 咱們經常在用戶按了提交按鈕後，利用javascript將提交按鈕disabled掉，這樣能夠防止網絡條件比較差的環境下，用戶反覆點提交按鈕致使數據冗餘地存入數據庫。數據庫

disabled和readonly這兩個屬性有一些共同之處，好比都設爲true，則form屬性將不能被編輯，每每在寫js代碼的時候容易混合使用這兩個屬性，其實他們之間是有必定區別的：網絡

1. 若是一個輸入項的disabled設爲true，則該表單輸入項不能獲取焦點，用戶的全部操做（鼠標點擊和鍵盤輸入等）對該輸入項都無效，最重要的一點是當提交表單時，這個表單輸入項將不會被提交。

2. 而readonly只是針對文本輸入框這類能夠輸入文本的輸入項，若是設爲true，用戶只是不能編輯對應的文本，可是仍然能夠聚焦焦點，而且在提交表單的時候，該輸入項會做爲form的一項提交。

示例：字體

readonly 不可編輯，能夠得到焦點，背景顏色默認灰色，值的字體顏色默認爲灰色，值能夠在請求中傳遞

disabled 不可編輯，不能夠得到焦點，背景顏色默認灰色，值的字體顏色默認爲灰色，值不能夠在請求中傳遞；

爲了使值不可修改，但顯示爲disabled的樣式，且能夠在請求中傳遞，則能夠經過採用readonly，修改字體顏色來實現 spa

<html>

<form>

<input name="1" type="text" size="20" value="readonly" readonly="readonly"><br>

<input name="1" type="text" size="20" value="readonly" readonly="readonly" style="color:#aaa ;"><br>

<input name="2" type="text" size="20" value="disabled" disabled="disabled"><br>

<input name="1" type="text" size="20" value="normal">

</form>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。