<!doctype html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>适配placeholder </title> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> /** + ---------------------------------------- + + 适配placeholder + Author: zzf + Date: 2012-4-5 + ---------------------------------------- + **/ jQuery.fn.placeholder = function () { return this.each(function(){ if ('placeholder' in document.createElement(this.tagName)) return; var self = this, placeholder = self.getAttribute('placeholder') || self.getAttribute('value'), el = jQuery(self); //如果placeholder和value属性同时存在，以placeholder为准 if (self.value === '' || self.value !== placeholder) { self.value = placeholder; } el.bind({ 'focus':function (){ this.value === placeholder && (this.value = ''); }, 'blur':function (){ this.value === '' && (this.value = placeholder); } }) }) }; //测试 $(document).ready(function (){ $('#test-wrap').find('.demo').placeholder(); }) </script> <div id="test-wrap"> <input id="" class="demo" type="text" name="" placeholder="text的placeholder" /> <br /><br /> <textarea id="" class="demo" name="" rows="" cols="20" placeholder="textarea的placeholder" ></textarea><br /> </div> </body> </html>