Home » jQuery 外掛

[jQ]jQuery-Placeholder

範例 1
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



HTML5 有針對表單輸入元素加入 placeholder 的新屬性,它可以用來當做提示字使用。不過 IE 10 以下的全部都不支援,所以囉~為了能向下相容,因此就有人寫了個 jQuery-Placeholder 這套件哩!

套件名稱:jQuery-Placeholder
套件網址:N/A
作者網站:https://github.com/danielstocks/jQuery-Placeholder/
套件網址:N/A
發佈日期:2011-04-07
檔案大小:4.11 KB
檔案下載:jquery.placeholder.js

HTML 屬性說明:

檢視原始碼 JavaScript
1

方法說明:

檢視原始碼 JavaScript
1
2
// 把指定的元素加上 placeholder
$(selector).placeholder();

使用範例:

檢視原始碼 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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<style type="text/css">
	/* 設定提示字的文字顏色 */
	::-webkit-input-placeholder {
		color: red;
	}
	:-moz-placeholder {
		color: red;
	}
	.placeholder {
		color: #ccc;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫有 placeholder 屬性的輸入框加上提示效果
		$('input[placeholder]').placeholder();
	});
</script>
 
<body>
	<h2>有使用 placeholder</h2>
	<p><input type="text" placeholder="提示" name="a"></p>
	<p><input type="password" placeholder="密碼" name="b"></p>
 
	<h2>沒有使用 placeholders</h2>
	<p><input type="text" name="c"></p>
	<p><input type="password" name="d"></p>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註:
要改變提示字的樣式的話,可以利用 .placeholder 的方式來指定。而在 webkit 上則用 ::-webkit-input-placeholder,在 mozila 上則用 :-moz-placeholder

4 筆針對 [jQ]jQuery-Placeholder 的迴響

  1. 1.3版有新增一個清除的功能

    使用IE的時候就知道了,都不填直接送出也會過(因為placeholder的內容是輸入在裡面)

    所以 IE 用的時候要特別找時機判斷使用
    $.Placeholder.cleanBeforeSubmit();

發表迴響