- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title> New Document </title>
- <meta name="Generator" content="EditPlus">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <script src1="http://discuz.gtimg.cn/cloud/scripts/jquery.min.js?v=1.6.4"></script>
- </head>
- <body>
- <!-- html5 -->
- <input type="text" name="search" placeholder="Search" value="">
- <input type="text" name="search2" placeholder="Search" value="">
- <script type="text/javascript">
- // 创建一个新的 input
- var i = document.createElement("input");
- // 如果创建的 input 不支持 placeholder 属性,执行以下代码
- if (!("placeholder" in i)) {
- // 遍历所有带有 placeholder 属性的 input
- $("input[placeholder]").each(function () {
- var self = $(this);
- // 保存原始文字颜色
- var color = self.CSS('color');
- // value 填充为 placeholder 值
- self.val(self.attr("placeholder")).bind({
- // 成为焦点的时候将内容置空,颜色变为真是颜色
- focus: function () {
- if (self.val() === self.attr("placeholder")) {
- self.val("");
- }
- self.css('color', color);
- },
- // 失去焦点的时候,如果内容为空,修改为 placeholder 值,并修改颜色
- blur: function () {
- if (self.attr("placeholder") && self.val() === "") {
- self.val(self.attr("placeholder"));
- self.css('color', '#BBB');
- }
- }
- });
- // 修改颜色
- self.css('color', '#BBB');
- });
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/180620134128.html
来源: http://www.codesnippet.cn/detail/180620134128.html