關於html元素的disabled,readonly 的詳細分析

關於html元素的disabled,readonly 的詳細分析

 

 

一，先看看這兩個屬性在效果和使用上的區別

READONLY and DISABLED both remove the functionality of the input field, but to different degrees. READONLY locks the field: the user cannot change the value. DISABLED does the same thing but takes it further: the user cannot use the field in any way, not to highlight the text for copying, not to select the checkbox, not to submit the form. In fact, a disabled field is not even sent if the form is submitted.

 

1，readonly是要鎖定這個控制項，通過在介面上無法修改他（但是通過javascript可以修改他）。

2，disabled 和readonly有相同的地方也是可以鎖定這個控制項使用者不能改變他的值，但是disabled的更徹底一些，他是要使你完全不能使用他，包括改變他的背景顏色（不信，你去修改一個被disabled掉的input文字框，你發現你是徒勞），如果是checkbox則不能選中他。

 

3，所有控制項都有disabled 屬性，但是不一定有readonly屬性。如select 下拉框

 

 

 

2)  checkBox

 

 

3) select下拉選擇框（這裡只能顯示disabled和非disabled的區別，因為select 沒有readonly屬性）

 

 

 

4）button按鈕

 

 

說明：點擊被readonly掉的按鈕照樣可以觸發事件，但是被disabled掉的按鈕就無法使用了不管上面有沒有事件。

 

5) div

 

 

說明：將div設定disabled屬性之後，整個div都灰掉了，但是文字框裡面還是可以輸入內容的。

注意：select下拉選擇框是沒有readonly屬性的，為什麼呢？（思考）。

 

 

二，再來看看這兩個屬性在資料提交方面的區別

我們先來寫一個測試代碼：

Code <form id="form1" runat="server">     <div>          <asp:TextBox ID="txt_Disabled" runat="server" Text="disabled"  disabled="disabled" ></asp:TextBox><br />          <asp:TextBox ID="txt_ReadOnly" runat="server" Text="ReadOnly"  ReadOnly="true"></asp:TextBox><br />          <asp:TextBox ID="txt_Normal" runat="server" Text="normal" ></asp:TextBox><br />         <asp:Button ID="btn_Test" runat="server"  Text="提交資料" onclick="btn_Test_Click" />         <input type="button" name="btn_ChangeValue" value="改變readonly的值" onclick="document.all('txt_ReadOnly').value = 'myzzb'" />     </div>
    </form>

在這裡，我寫了一個asp表單頁面，使用了get 方式提交

 

從提交的url可以看出被disabled的控制項的值沒有提交到伺服器，這個時候在伺服器端是擷取不到這個控制項的值的，

相反，被設定成readonly的文字框的值是提交到伺服器的。

 

 

這裡出現了一個奇怪的情況，readonly的文字框是被設定成readonly的了，但是我通過下面的按鈕 "改變readonly值"

document.all('txt_ReadOnly').value = 'myzzb' 這個時候 被readonly的值顯示的是myzzb了，現在我點提交資料，在伺服器端擷取到了值是myzzb了，但是奇怪的是，回傳到頁面之後，頁面的readonly控制項裡面還是顯示的是改變myzzb之前的 Readonly的值了，這究竟是什麼原因呢？

這是微軟在.net2.0裡面做的小改動。如果Textbox的ReadOnly屬性設定成"True",ViewState將不會被回傳到伺服器，雖然用戶端已經更改了。但是我們依然還是可以用TextBox.Attributes.Add("readonly","readonly") 來實現。

在伺服器端去設定一個控制項的readonly 和在用戶端設定一個文字框的readonly屬性是有區別的。在伺服器端我們用TextBox.Attributes.Add("readonly","readonly") 頁面在回傳的時候，即使文字框是readonly 的，也是會改變他的值的，在用戶端在2.0裡面就會不會顯示用戶端的修改。

ps：在.net 1.1 裡面 不會出現上面值還儲存之前的值的情況。

 

 

大家仔細想一下會有一個問題出現，就是有時候我們寫程式的時候，比如一個購買商品的頁面，我們可以在上面輸入商品的數量，但是價格我們設定成唯讀，最後下面有一個總價格就是 數量 * 唯讀價格，那麼我們很可能就是這樣做的，在背景時候讀取 商品數量的 textbox值，然後讀取 價格的textbox的值，然後兩者的積 作為總金額 uodate到資料庫中去了，如果用戶端的使用者和我們一樣是一個會點程式的小程式員，那麼麻煩就有可能來拉，他可以查看源檔案，查看到被readonly的價格的文字框的id或者是name什麼的，然後在瀏覽器中輸入指令碼去改變價格的值，然後點提交，那麼這個小程式員就可以隨便怎麼給自己打折都不過份啊。

就想下面的列子顯示的，在瀏覽器中輸入指令碼改變單價，然後在點返回就可以看到單價已經被改拉。

 

 

 

 

 

那麼，伺服器端設定設定readonly ，disabled和在用戶端設定readonly,disabled的有什麼不同嗎？

我們現在通過在伺服器端去設定這兩個控制項，代碼如下：

 

 

Code protected void Page_Load(object sender, EventArgs e)
        {
            //在伺服器端給控制項加上readonly 和 disabled屬性             txt_ReadOnly.Attributes.Add("readonly", "readonly");
            txt_Distabled.Attributes.Add("disabled", "disabled");
        }

 

 

 

我們將表單的提交方法設定成get提交，我們就可以在url裡面看到提交的內容，發現被設定成disabled的控制項沒有提交到伺服器，readonly的提交資料到伺服器了，如所示：

 

 

這說明和用戶端的效果是一樣的。

 

通過以上的測試說明以下幾點：

1，用戶端設定readonly，disabled和伺服器端設定readonly效果一樣。

2，readonly的資料是可以提交到伺服器的，disabled的資料是不可以提交到伺服器的。

3，在.net1.1裡面設定成readonly的textbox 在用戶端改變之後。伺服器是會回傳用js改變的值，在.net 2.0裡面是不可以回傳到用戶端，除非你在伺服器端設定他的readonly屬性(這個時候就和1.1效果一樣)。

4，設定成readonly的TextBox在用戶端修改資料會提交到伺服器，那麼作為程式員的你，千萬不要update的時候也把這個值修改，如果你是購物網站這麼做的話，那麼你完蛋了。

5，在伺服器端用txtBox.enabled  =  false;在用戶端解析的時候會給TextBox加上diabaled也就是說，資料不能提交到伺服器的。

 

從提交的url可以看出被disabled的控制項的值沒有提交到伺服器，這個時候在伺服器端是擷取不到這個控制項的值的，

相反，被設定成readonly的文字框的值是提交到伺服器的。

 

 

 

各種控制項disabled和readonly之後的顯示和操作區別：

1） input TextBox