<!doctype html><Html>
<head>
<meta http-equiv="content-type" content="text/Html; charset=UTF-8">
<title>Html5_兼容_input&placeholder</title>
<style type="text/CSS">
.placeholder{color:#a9a9a9}
</style>
<script src="jquery.JS"></script>
<script type="text/Javascript"> // 檢測input是否支持placeholder特性
(function() {
var inp = document.createElement("input");
window.supports = {
placeholder: "placeholder" in inp })(); // 綁定input的placeholder
function bindPlaceholder(obj) {
var jqobj = $(obj),placeholder = jqobj.attr("placeholder");
if(jqobj.val() == ""){
jqobj.val(placeholder);
jqobj.addClass("placeholder"); jqobj.bind({
focus:function(){
if($(this).val() == placeholder) {
$(this).removeClass("placeholder");
$(this).val(""); },
blur:function(){
if($(this).val() == "") {
$(this).addClass("placeholder");
$(this).val(placeholder); } } //頁面引用
$(document).ready(function(){
if(!window.supports.placeholder){
$("input[placeholder]").each(function(){
bindPlaceholder(this); } </script>
</head>
<body>
<label for="search">搜索</label>: <input type="text" id="search" name="search" placeholder="請輸入關鍵字..." />
<button>dian </button>
</body>
</Html> -------------