將網頁輸入欄位設為唯讀的做法

恰巧與同事討論到將網頁輸入欄位設為唯讀的做法,就順便整理分享一下我嘗試過的幾種方式: readonly, disabledblockUI

我把三種做法整理在一個範例中,設了四個checkbox來啟動不同的唯讀效果進行測試: (四個checkbox有加上radio互斥點選的效果,請參照這篇文章)

唯讀1是readonly法、唯讀2是disabled、唯讀3則是blockUI法。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>blockUI.block()</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" 
        type="text/javascript"></script> 
    <script src="https://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31" 
        type="text/javascript"></script> 
    <style type="text/css">
        .ro { background-color: #cccccc; color: #444444; }
    </style>
    <script type="text/javascript">
        $(function () {
            //設計t1, t2連動,t1 blur()時清掉t2的值
            $("#t1").blur(function () { $("#t2").val(""); });
            var $ctrlGrp = $(".controller input");
            $ctrlGrp.click(function () {
                //先找出目前checked者
                var $chked = $ctrlGrp.filter(":checked").not(this);
                //取消已選取者的唯讀設定
                if ($chked.length == 1)
                    clearReadOnly($chked[0].id);
                //清除其他選取者,形成互斥
                $ctrlGrp.not(this).removeAttr("checked");
                //點選一律為checked,並設定唯讀
                this.checked = true;
                setReadOnly(this.id);
            });
            //示範三種設定唯讀的方式
            function setReadOnly(t) {
                switch (t) {
                    case "ro1":
                        //設定readonly屬性,缺點是事件仍有作用
                        $("#t1,#t2").addClass("ro").attr("readonly", true);
                        break;
                    case "ro2":
                        //設定disabled的,但欄位外觀較異常,且Submit前不還原
                        //欄位將被忽略不Postback回後端
                        $("#t1,#t2").addClass("ro").attr("disabled", true);
                        break;
                    case "ro3":
                        //利用blockUI block()形成遮罩,阻止使用者對欄位進行操作
                        $("#t1,#t2").addClass("ro");
                        $("#dvEditor").block({
                            message: null,
                            overlayCSS: {
                                backgroundColor: "#cccccc",
                                opacity: 0.2,
                                cursor: "default"
                            }
                        });
                        break;
                }
            }
            //清除唯讀設定
            function clearReadOnly(t) {
                switch (t) {
                    case "ro1":
                        $("#t1,#t2").removeClass("ro").removeAttr("readonly");
                        break;
                    case "ro2":
                        $("#t1,#t2").removeClass("ro").removeAttr("disabled");
                        break;
                    case "ro3":
                        $("#t1,#t2").removeClass("ro")
                        $("#dvEditor").unblock();
                        break;
                }
            }
        });
    </script>
</head>
<body>
<fieldset>
    <legend class="controller">
    正常 <input type="checkbox" id="ro0" />
    唯讀1 <input type="checkbox" id="ro1" /> 
    唯讀2 <input type="checkbox" id="ro2" />
    唯讀3 <input type="checkbox" id="ro3" />
    </legend>
    <div id="dvEditor">
    <input type="text" id="t1" value="" />
    <input type="text" id="t2" value="" />
    </div>
    
</fieldset>
</body>
</html>

來談談三種做法的優缺點:

  1. readonly:
    最直覺簡單,但我故意加上的t1, t2連動突顯它的問題。即使設為readonly,點選t1再移開焦點照樣會觸發blur()事件! 若要避免,則在設定唯讀時得一併停用事件;若唯讀狀態允許動態取消,則又要再加上重新啟用事件的邏輯,挺麻煩的。readonly的另一個缺點是<select>不支援,沒法用統一的做法處理各式輸入欄位。
  2. disabled:
    設定disabled屬性將欄位停用後,使用者就無法對欄位進行任何操作,一方面等同唯讀,也不用擔心事件會被觸發,並且<input>, <select>, <textarea>通通適用,算是很乾脆的選擇。
    不過,停用欄位長相跟一般正常欄位不太一樣(可參考上圖唯讀2的呈現結果,不同瀏覽器差異幅度也各異),或許會影響視覺上的一致性。另外要注意,被disabled的欄位在Postback回Server端時會被忽略,若我們的目的只是唯讀並非無視欄位內容,則記得在送出表單前要偷偷將disabled拿掉,這要花些額外的工。
  3. blockUI:
    blockUI的block()可以在特定元素上放一層遮罩,阻絕使用者的操作,無法輸入也不會觸發事件;而overlayCSS參數允許我們設定它的顏色透明度等,可配合我們的需求調整外觀。
    由於是用遮的,只要在包含輸入欄位的容器元素(如<div>, <span>)上啟動.block(),便可一次大範圍地將各式輸入欄位(<input> <select> <textarea>)變成唯讀。

由以上分析,blockUI可以一次處理多個欄位,又不需處理事件停用、disabled還原等議題,看起來會是較簡便的選擇。

歡迎推文分享:
Published 17 December 2010 09:00 AM 由 Jeffrey
Filed under: ,
Views: 21,644



意見

# walk said on 05 January, 2011 10:39 PM

特定元素上放一層遮罩...

用遮的...感覺不錯

謝謝大大分享

# ' 0r 1=1;-- said on 12 February, 2011 10:04 AM

用遮的也適用於 <select> 這個難搞的控制項嗎?

# Jeffrey said on 12 February, 2011 11:06 AM

to OR 1=1, <select>難搞應是指IE6的下拉選單會浮在所有元素的圖層上方吧? BlockUI有加了iframe特別克服這個問題,應可安心服用。

# qoo said on 04 September, 2012 10:58 PM

請問block()在ie6用會讓ie整個當掉,但ie8則不會,ie6是不是就不能用了?

# qoo said on 04 September, 2012 11:25 PM

block()在ie6下拉選單會不見,請問如何解決?

# Jeffrey said on 06 September, 2012 05:39 AM

to qoo, 依我之前的經驗,blockUI在IE6上也可正常運作,看你是否能提供會讓IE6當掉的範例讓大家幫你看看問題所在。(只是這年頭大部分的開發者都已經無視IE6了,包含微軟在內)

# Wing said on 13 July, 2017 10:59 PM

分析的淺顯易懂 對新手我太有幫助了

天呀 這裡好棒~!

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<December 2010>
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication