<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. [转载]typedef常见用法

    注:本文系转载,并修改了一些错误. typedef常见用法 1.常规变量类型定义 例如:typedef unsigned char uchar描述:uchar等价于unsigned char类型定义 ...

  2. 长沙Uber优步司机奖励政策(1月25日~1月31日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. ecshop获取客户端操作系统

    <?php /** * 获得客户端的操作系统 * * @access private * @return void */ function get_os() { if (empty($_SERV ...

  4. uva1620 Lazy Susan

    留坑(p.256) 什么找规律啊 坑爹 #include<cstdio> #include<cstring> #include<cstdlib> #include& ...

  5. jQuery 实现上下,左右滑动

    前几天的任务:http://t.sina.com.cn/  的下滑效果. 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一 ...

  6. Linq中Union与Contact方法用法对比

    文章一开始,我们来看看下面这个简单的实例. 代码片段1: int[] ints1 = { 2, 4, 9, 3, 0, 5, 1, 7 }; int[] ints2 = { 1, 3, 6, 4, 4 ...

  7. eclipse下maven插件的安装

    最近公司项目要求使用maven来进行项目的管理开发,在这里记录一下eclipse下maven插件的安装. maven插件在eclipse下安装害得我挺恼火的. 我想用最简单的那种方式--在线安装: 通 ...

  8. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

  9. jersey + tomcat 实现restful风格

    本文参考 http://www.cnblogs.com/bluesfeng/archive/2010/10/28/1863816.html 环境: idea 15.0.2 jersey 1.3 tom ...

  10. 如何自定义UIPickerView中文本的大小和文本靠左或靠右显示?

    需要重写UIPickerView中的 -(UIView*)pickerView:(UIPickerView*)pickerView viewForRow:(NSInteger)row forCompo ...