<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. (转载)关于having 1=1 和group by 爆表的思考和总结

    上次在网上看到一篇关于having 1=1 和group by 爆表注射的文章,看得我晕乎乎的,为了了解其根本原理,我稍微学习了下数据库知识,翻了下资料,但有些资料找不到,于是,开始发挥本天才的思维来 ...

  2. Struts1、Struts2和SpringMVC剖析【转载】

    前段框架用了不少,今天就来做个总结.网上关于Struts1.Struts2.SpringMVC的文章有很多,这里的内容就是基于它们,来做个比较. 这三个框架是按照上面的顺序,依次出现的,它们都是对MV ...

  3. Codeforces 348A Mafia

    题目链接:http://codeforces.com/problemset/problem/348/A 题目大意:N个人中找出1个人主持,剩下N-1个人参与游戏,给出每个人想参与游戏的次数,问要满足每 ...

  4. Java GC 专家系列5:Java应用性能优化的原则

    本文是GC专家系列中的第五篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种GC ...

  5. 钥匙计数之一 - HDU 1438(状态压缩打表)

    分析:首先想到每个钥匙的结尾有4种状态,不过题目还需要判断有三种不同的钥匙深度,所以每种深度结尾后有2^4种状态,0000->1111,不过题目还需需要有相邻的钥匙深度大于等于3,所以需要两种不 ...

  6. 当前jQuery Mobile支持的6种页面切换方式

    切换方式 data-transition属性值 横向幻灯方式 slide 自上向下幻灯方式 slideup 自下向上幻灯方式 slidedown 中央弹出 pop 淡入淡出 fade 旋转弹出 fli ...

  7. 关于android 自己实现 back键 home键

    今天在被问到一个问题的时候突然想要看看这些东西了.因为一直以来,我返回上个界面,和大家普遍的方法都是一样的. 1. finish()本页面. 2. intent 跳转到上个页面. 一 ,在 按下手机上 ...

  8. [RxJS] Transformation operator: bufferToggle, bufferWhen

    bufferToggle(open: Observable, () => close: Observalbe : Observalbe<T[]>) bufferToggle take ...

  9. [CSS] @keyframes

    @keyframes swing{ 0% { transform: rotate(0deg)} 100% {transform: rotate(-30deg)} } #sweetlandia{ ani ...

  10. ARCGIS二维三维放大缩小

    private void ULZoomPan() { ESRI.ArcGIS.SystemUI.ICommand com = new ControlsGlobeFixedZoomOutCommand( ...