<form name="testForm" action="" method="">
<input type="text" name="hotGoods" class="text1">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("input.text1").val('请输入您要搜索的内容').css('color','#ccc');
textFill($('input.text1'));
});
function textFill(input){
var originalvalue = input.val(); //请输入您要搜索的内容
// console.log(originalvalue);
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){
input.css('color', '#333');
input.val('');
}
});
input.blur( function(){
if( $.trim(input.val()) == '' ){
input.css('color', '#ccc');
input.val(originalvalue);
}
});
}
</script>

js实现placeholder效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  3. 浅谈实现placeholder效果的几种方案

    placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示.高端浏览器支持此属性(ie10/11在获得焦点 ...

  4. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

  5. Jquery简单的placeholder效果

    Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...

  6. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  7. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  9. placeholder 效果的实现,input提示字,获取焦点时消失

    <!doctype html><html><head><meta charset="utf-8"><title>plac ...

随机推荐

  1. poj 2484 A Funny Game(博弈)

    A Funny Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4639   Accepted: 2855 Desc ...

  2. UVa11090 Going in Cycle!!

    UVa11090 Going in Cycle!! 链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34650 [思路] ...

  3. iOS设备隐藏StateBar

    //隐藏StateBar - (BOOL)prefersStatusBarHidden {     returnYES; }

  4. KiCad中层定义

    5.2.1. Paired layers The Adhesives layers (Copper and Component):    These are used in the applicati ...

  5. 29. Divide Two Integers

    用加减法模拟除法. 除法本质就是 被除数 - 商个除数相加 = 0 如果你电脑足够好,可以无限减..但是这个题肯定不是这么简单. 最快的方法还是 减去 商乘以除数. 但是这里不能使用乘法,那只好用BI ...

  6. hibernate官方新手教程 (转载)

    hibernate官方新手教程第一部分 - 第一个Hibernate程序 首先我们将创建一个简单的控制台(console-based)Hibernate程序.我们使用内置数据库(in-memory d ...

  7. [Unity3D]Unity3D游戏开发之自己主动寻路与Mecanim动画系统的结合

    大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 这段时间博主将大部分的精力都放在了研究官方演示样例项目上,主要是希望能够从中挖掘出有价值的东 ...

  8. centos 网站目录权限参考

    Linux下Apache网站目录读写权限的设置 网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定. 我们假设http服务器运行的用户和用户组是www,网站用户为cen ...

  9. CHAR 详解

    CHAR(20):20指的是表中的a字段能存储的最大字符个数 CREATE TABLE `a` ( `a` char(20) DEFAULT NULL) ENGINE=InnoDB DEFAULT C ...

  10. iOS--NSAttributedString使用介绍

    iOS–NSAttributedString使用介绍 原文见: http://www.itnose.net/detail/6177538.html http://***/html/topnews201 ...