在某些特定的網頁表單
使用者常常不太清楚要輸入什麼樣的資料(即使前面有敘述亦然XD)
此時可利用JavaScript
在TextBox內部加上簡單的Hint
廢話不多說 直接看程式碼囉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input Hints</title>
<style type="text/css">
input.blur {
color:#808080; /* GRAY */
}
</style>
</head>
<body>
<div id='inputDiv'>
<input type='text' title='請輸入姓名' />
<br /><br />
<input type='text' title='請輸入E-Mail' />
<br /><br />
<input type='text' title='請輸入電話' />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
textBoxHint("inputDiv");
function textBoxHint(id, options) {
var defaults = {
selector: 'input:text[title]',
blurClass:'blur'
};
element = ('#'+id);
.extend(true, defaults, options);
if (element.is(':text')) {
if (!element.attr('title'))
e = null;
} else {
element = element.find(defaults.selector);
}
if (element) {
element.each(function() {
var target = (this);
if (.trim(target.val()).length == 0) {
target.val(target.attr('title'));
}
if (target.val() == target.attr('title')) {
target.addClass(defaults.blurClass);
} else {
target.removeClass(defaults.blurClass);
}
target
.focus(function() {
if (.trim(target.val()) == target.attr('title')) {
target.val('');
target.removeClass(defaults.blurClass);
}
})
.blur(function() {
var val = .trim(target.val());
if (val.length == 0 || val == target.attr('title')) {
target.val(target.attr('title'));
target.addClass(defaults.blurClass);
}
});
// empty the text box on form submit
(this.form).submit(function(){
if (.trim(target.val()) == target.attr('title'))
target.val('');
});
});
}
}
</script>
</body>
</html>
執行結果如下圖
不過HTML5給input這個標籤新增了一個屬性:placeholder
<input type='text' placeholder='請輸入姓名' />
<br /><br />
<input type='text' placeholder='請輸入E-Mail' />
<br /><br />
<input type='text' placeholder='請輸入電話' />
只要這樣就可以達到上面那大段程式碼的效果了XD
HTML5果然很強大!
文章標籤
全站熱搜
