最近更新: 2008-04-21

美化不可編輯的表單欄位

在 Web 應用的設計工作中,我們常常會讓"資料新增"、"資料編輯"與"資料檢視"這幾個動作共用同一個頁面樣板,差別僅在於檢視動作下的表單欄位輸入控制元件是不可編輯的。而要讓輸入控制元件不可編輯的方式很簡單,僅需要設置輸入控制元件的 disabledreadonly 即可。只不過,我們最好能在視覺上美化一下不可編輯表單欄位,讓使用者可以看出哪些欄位是不可編輯的。特別是 disabled 的輸入控制元件,其預設的顯示樣式實在很醜。非美化不可。

如果你使用 Selenium Core 編寫 Web 應用的測試案例,那麼關於輸入控制元件的 readonly 屬性有一些測試上的注意事項,請參考《A patch of isEditable of Selenium Core 0.83》。

首先來看一個簡單的範例與圖像。這是在 Firefox 下的預設顯示樣式。

<label for="i1">Label1: </label><input id="i1" disabled="disabled" value="1"/>
<input id="editI1" type="checkbox" onclick="toggleEditable();" />Editable
<br/><br/>
<label for="i2">Label2: </label><input id="i2" value="2"/>
disabled欄位的預設顯示樣式

我們可以看出預設顯示樣式很醜,而且不符合我們的用途。我們的用途是讓使用者"檢視"內容。但預設樣式卻是灰字灰底,搞得一團灰,看著就礙眼,如何"檢視"?所以我們接著要用 CSS 美化它。作法很簡單,用 CSS 的 attr selector 語法,指定 input[disabled] 的 style sheet 即可。如下所示:

<style type="text/css">
input {
    border: 1px solid;
}

input[disabled] {
    border: 1px hidden;
    background-color: transparent;
    color: black;
}
</style>

<label for="i1">Label1: </label><input id="i1" disabled="disabled" value="1"/>
<input id="editI1" type="checkbox" onclick="toggleEditable();" />Editable
<br/><br/>
<label for="i2">Label2: </label><input id="i2" value="2"/>
美化後的disabled欄位顯示樣式

提醒一下,萬惡淵藪的 M$IE6 並不支援 CSS attr selector 語法 (M$IE7 以後才支援)。為了美化檢視頁面,就會看到一些對應 M$IE6 的奇招怪式。我個人已經無視 IE6 了。對那些還在用 IE6 的人,我都會"嚇他們"說微軟已經停止 IE6 支援了,要趕快升級 IE7。這時候我才發現 FUD (Fear, uncertainty and doubt) 策略還真好用,嘿嘿嘿(奸笑中)

最後,我展示一段配合 JavaScript 改變表單欄位可編輯狀態的範例。這也是很常用的技巧。

Editable

<script type="text/javascript">
function toggleEditable() {
    var elm = document.getElementById('i1');
    elm.disabled = !elm.disabled;
}
</script>

<style type="text/css">
input {
    border: 1px solid;
}

input[disabled] {
    border: 1px hidden;
    background-color: transparent;
    color: black;
}
</style>

<label for="i1">Label1: </label><input id="i1" disabled="disabled" value="1"/>
<input id="editI1" type="checkbox" onclick="toggleEditable();" />Editable
<br/><br/>
<label for="i2">Label2: </label><input id="i2" value="2"/>

樂多舊網址: http://blog.roodo.com/rocksaying/archives/5895849.html

樂多舊回應
vuenget@yahoo.com(張文杰) (#comment-16486059)
Thu, 22 May 2008 22:58:28 +0800
Hi, 您好.
這是我第一次上你的部落格, 但是我發現你的網頁用firefox瀏覽會超出右邊的界線, 不知道你在不在意這種不相容的情形? 謝謝.
未留名 (#comment-16597449)
Thu, 05 Jun 2008 16:46:13 +0800
我的網頁是以 Firefox 為準設計的。

如果我的網頁會超出右邊的界線,那也是因為 firefox 本來就這樣處理的... 因為太相容 firefox 才會這樣。

Ok, 我來解釋一下原因。

首先,我的網頁上方會 "動態地" 產生一列「文件分類、tag 與搜尋列」,這一列是由我的 javascript 自動處理的。它又是按照 W3C CSS 的規範去安排 layout。

在某些情形下,如果我的文章中使用了比較長的 tag ,那麼就會出現一列很長的「文件分類、與最近文章tag 與搜尋列」,而 firefox 並不會強制在顯示時換行,所以就會出現那一列超出顯示範圍右邊界的情形。

那是一種程式自動處理時產生的特殊情形。

我相信你現在已經看不到超過出右邊界的情況了。
不過並非我修改了什麼,只是因為那個擁有長tag的文章已經不是最近發表的文章,所以程式不再抓到那個長 tag ,也就不會顯示超出邊界的導覽列。