一般我們如果把欄位設為唯讀(readonly)的話,通常都是利用其 readonly 的屬性,但 jquery-plugin Readonly 套件是採用遮罩的方式來讓使用者無法輸入,但本身欄位是沒被設為唯讀,因此原本唯讀可能造成的資料傳送就沒問題了。
套件名稱:jquery-plugin Readonly
套件版本:1.0 beta 1
作者網站:http://dev.powelltechs.com/jquery.readonly/
套件網址:http://plugins.jquery.com/project/readonly
發佈日期:2009-12-18
檔案大小:10.3 KB
檔案下載:jquery.readonly.js jquery.readonly.css
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | active(選填) 描述: 是否啟用 reayonly 遮罩效果 預設值: undefined enabled(選填) 描述: 是否啟用 reayonly 遮罩效果 預設值: undefined onClick(選填) 描述: 當使用者點擊 readonly 遮罩後的處理函式 預設值: null onDblClick(選填) 描述: 當使用者連點 readonly 遮罩後的處理函式 預設值: null onFocus(選填) 描述: 當出現 readonly 遮罩後,可設定是否接受使用者利用 tab 的方式來讓被設為 readonly 元素取得焦點 預設值: null onKeyPress(選填) 描述: 當出現 readonly 遮罩後,可設定是否接受使用者利用再對已設為 readonly 的元素輸入按鈕;若要能啟用該功能時,得先設定 onFocus 不為 null 才行 預設值: function(e){ if(e.keyCode == 9) return true; else return false; } |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | // 啟用 readonly 遮罩效果 $(selector).readonly(true); // 停用 readonly 遮罩效果 $(selector).readonly(false); // 啟/停用 readonly 遮罩效果 $(selector).readonly('toggle'); // 啟/停用 readonly 遮罩效果(使用參數) $(selector).readonly(option); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <script type="text/javascript" src="jquery.js"></script> <link type="text/css" rel="stylesheet" href="jquery.readonly.css"> <script type="text/javascript" src="jquery.readonly.js"></script> <style type="text/css"> .demoarea{ border: 1px solid #333; padding: 5px 10px; margin: 5px 0; width: 275px; } </style> <script type="text/javascript"> $(function(){ $('.enable_readonly').click(function(){ // 利用參數的方式來啟用 readyonly $('.demo').readonly({ enabled: true, onClick: function(){ alert('此欄位唯讀'); } }); }); $('.disable_readonly').click(function(){ $('.demo').readonly(false); }); }); </script> <body> <button class="enable_readonly">Enable Readonly</button> <button class="disable_readonly">Disable Readonly</button> <div class="demoarea"> <select name="demo" class="demo"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="demoarea"> <a href="http://www.google.com" target="_blank" class="demo">Google</a> </div> <div class="demoarea"> <form action="" method="get"> Name: <input type="text" class="demo" name="name"><br/> Something Else: <input type="text" class="demo" name="something"><br/> <input type="submit" value="Go" class="demo"> </form> </div> </body> |
這句話好像有點問題「我們如果把欄位設為唯讀(readonly)的話,是無法把資料傳送到後端主機的」
是設成 "disabled" 才無法把資料送出。
可參考:
http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/10/21/textbox-readonly-and-disabled.aspx
抱歉...是我記錯且誤會作者意思XD
也謝謝你的指正