<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. 《Linear Algebra and Its Applications》-chaper5-特征值与特征向量-基本概念

    基于之前章节的铺垫,我们这里能够很容易的引出特征向量和特征值的概念. 首先我们知道n x n矩阵的A和n维向量v的乘积会得到一个n维的向量,那么现在我们发现,经过计算u=Av,得到的向量u是和v共线的 ...

  2. 贵价的高级衣物清理法小Tipp之观察别人当然要从脚看起咯!

    贵价的高级衣物清理法小Tipp之观察别人当然要从脚看起咯! 贵价的高级衣物清理法小Tipp之观察别人当然要从脚看起咯!

  3. CMS收集器

    CMS收集周期 CMS并非没有暂停,而是用两次短暂停来替代串行标记整理算法的长暂停,它的收集周期是这样:初始标记(CMS-initial-mark) -> 并发标记(CMS-concurrent ...

  4. java基础之 IO流

    javaIO流   IO流 : (input  output) 输入输出流 :输入 :将文件读到内存中 输出:将文件从内存输出到其他地方.   IO技术的作用:主要就是解决设备和设备之间的数据传输问题 ...

  5. cocos2d-x创建精灵动画

    创建动画一般过程: 1.创建精灵框架缓存,并向其中添加相应的动画文件(plist),最后,通过动画集缓存生产动画 CCSpriteFrameCache *cache = CCSpriteFrameCa ...

  6. how tomcat works 读书笔记四 tomcat的默认连接器

    事实上在第三章,就已经有了连接器的样子了,只是那仅仅是一个学习工具,在这一章我们会開始分析tomcat4里面的默认连接器. 连接器 Tomcat连接器必须满足下面几个要求 1 实现org.apache ...

  7. U盘安装centos 6.4教程(总算是弄好了

    参考:http://blog.chinaunix.net/uid-27666459-id-3342477.html http://www.linuxidc.com/Linux/2011-05/3569 ...

  8. C++实现二叉树(转)

    /************************************************************************* 这是一个二叉查找树,实现了以下操作:插入结点.构造 ...

  9. Java设计模式02:常用设计模式之工厂模式(创建型模式)

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的.  工厂模式在<Java与模式>中分为三类: 1)简单工厂模式(Simple Fact ...

  10. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...