Readonly和disabled的區別 display:none和visible:hidden的區別

怎樣使input中的內容爲只讀，也就是說不讓用戶更改裏面的內容。

 <input type="text" name="input1" value="中國" /> 
<input type="text" name="input1" value="中國" readonly />

 <input type="text" name="input1" value="中國" disabled />

 最好不要用disabled,否則就沒法取出裏面的值了. 

<input type="text" name="input1" value="中國" readonly="true" /> 

<input type="text" name="input1" value="中國" readonly />

 區別： 
1. disabled  --  徹底不可編輯，而且是不能複製的 

2.readonly   --  不可編輯，可是是能夠複製。 
3.Readonly只針對input(text / password)和textarea有效，而disabled對於全部的表單元素都有效，包括select, radio, checkbox, button等。 
4.表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去

 

1）首先說明的是display:none和visible:hidden都可以實現將網頁上某個元素隱藏起來。

（2）若是在樣式文件或頁面文件代碼中直接用display:none對元素進行了隱藏，載入頁面後，在沒有經過js設置樣式使元素顯示的前提下，使用js代碼會沒法正確得到該元素的一些屬性，好比offSetTop,offSetLeft等，返回的值會爲0，經過js設置style.display來使元素顯示後才能正確得到這些值。 

（3）使用display:none隱藏的元素不會被百度等搜索網站檢索，會影響到網站的SEO，某些狀況下可使用left:-100000px來達到一樣效果。 

（4）若是是經過樣式文件或<style>css</style>方式來設置元素的display:none樣式，用js設置style.display=""並不能使元素顯示，可使用block或inline等值來代替。經過style="display:none"直接在元素上進行的設置不會有這個問題。 

（5）將元素設置爲display:none將不爲被隱藏的對象保留其物理空間，即該對象在頁面上完全消失，通俗來講就是看不見也摸不到。而將元素設置爲visibility:hidden則僅使對象在網頁上不可見，但該對象在網頁上所佔的空間沒有改變，通俗來講就是看不見但摸獲得。

Readonly和Disabled的區別：

（1）Readonly和Disabled它們都可以作到使用戶不可以更改表單域中的內容。 

（2）在disabled和readonly這兩個屬性都設置爲true的狀況下，form屬性將不能被編輯。 

（3）若是一個輸入項的disabled設爲true，則該表單輸入項不能獲取焦點，用戶的全部操做（鼠標點擊和鍵盤輸入等）對該輸入項都無效。而readonly只是針對文本輸入框這類能夠輸入文本的輸入項，若是設爲true，用戶只是不能編輯對應的文本，可是仍然能夠聚焦焦點。 

（4）Readonly只針對input(text / password)和textarea有效，而disabled對於html中全部的表單元素都有效，可是在表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交以後，這個元素的值不會被提交，而被設置爲readonly的表單元素的值仍是會被提交的。 通常比較經常使用的狀況是： 

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

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

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