<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery实现IE浏览器兼容placeholder效果</title> <style type="text/css"> * { margin: 0; padding: 0; } .input { width: 200px; height: 30px; line-height: 30px; padding: 0 10px; border: 1px solid #ddd; margin: 20px auto; display: block; } </style> </head> <body> <input type="text" placeholder="请输入姓名" class="input" /> <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //判断浏览器是否支持placeholder属性 supportPlaceholder = 'placeholder' in document.createElement('input'), placeholder = function(input) { var text = input.attr('placeholder'), defaultValue = input.defaultValue; if (!defaultValue) { input.val(text).addClass("phcolor"); } input.focus(function() { if (input.val() == text) { $(this).val(""); } }); input.blur(function() { if (input.val() == "") { $(this).val(text).addClass("phcolor"); } }); //输入的字符不为灰色 input.keydown(function() { $(this).removeClass("phcolor"); }); }; //当浏览器不支持placeholder属性时，调用placeholder函数 if (!supportPlaceholder) { $('input').each(function() { text = $(this).attr("placeholder"); if ($(this).attr("type") == "text") { placeholder($(this)); } }); } }); </script> </body> </html>
效果图：
