[jQ]jquery-plugin Readonly 1.0 beta 1

作者：男丁格爾 | 日期：2010-01-17 | 分類：jQuery 外掛 | 瀏覽：1,559 | 留言：2



一般我們如果把欄位設為唯讀(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 遮罩效果
$(...).readonly(true);
 
// 停用 readonly 遮罩效果
$(...).readonly(false);
 
// 啟/停用 readonly 遮罩效果
$(...).readonly('toggle');
 
// 啟/停用 readonly 遮罩效果(使用參數)
$(...).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>

範例瀏覽：
http://demonstration.abgne.tw/jquery/plugins/0076/0076.html

相關連結
推薦內容
標籤：, ,
發表留言

如果有任何 jQuery 問題也可以直接到 討論區 中發文討論。
  1. citypig
    2010-01-17 18:37:46 回覆

    這句話好像有點問題「我們如果把欄位設為唯讀(readonly)的話，是無法把資料傳送到後端主機的」
    是設成 "disabled" 才無法把資料送出。
    可參考:
    http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/10/21/textbox-readonly-and-disabled.aspx


    • 男丁格爾
      男丁格爾
      2010-01-17 19:20:24 回覆

      抱歉...是我記錯且誤會作者意思XD
      也謝謝你的指正