1. <form name="testForm" action="" method="">
  2. <input type="text" name="hotGoods" class="text1">
  3. </form>
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("input.text1").val('请输入您要搜索的内容').css('color','#ccc');
  4. textFill($('input.text1'));
  5. });
  6. function textFill(input){
  7. var originalvalue = input.val(); //请输入您要搜索的内容
  8. // console.log(originalvalue);
  9. input.focus( function(){
  10. if( $.trim(input.val()) == originalvalue ){
  11. input.css('color', '#333');
  12. input.val('');
  13. }
  14. });
  15. input.blur( function(){
  16. if( $.trim(input.val()) == '' ){
  17. input.css('color', '#ccc');
  18. input.val(originalvalue);
  19. }
  20. });
  21. }
  22. </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. leetcode实现 “10001”+“1011” 返回二进制相加的结果

    https://oj.leetcode.com/problems/add-binary/ 实” 1 public class Solution { public String addBinary(St ...

  2. JavaScript高级程序设计1.pdf

    第一遍通读的时候对JavaScript一点都不了解翻了一整本书仅仅是眼熟的几个名词,现在会写一些js效果了,对程序有一定的认知,又要在读一遍,再加深一些了解,当然以后还会有第三遍第四遍,等完全啃透了这 ...

  3. asp 数组

    定义简单数组 有两种方法在asp中定义和初始化数组,让我们看看每种的例子: 方法一:MyArray = Array("Jan","Feb","Mar& ...

  4. Redis教程03——Redis 发布/订阅(Pub/Sub)

    Pub/Sub 订阅,取消订阅和发布实现了发布/订阅消息范式(引自wikipedia),发送者(发布者)不是计划发送消息给特定的接收者(订阅者).而是发布的消息分到不同的频道,不需要知道什么样的订阅者 ...

  5. zendstudio xdebug 配置

    1. 下载XDebug: http://www.xdebug.org/download.php   通过phpinfo()查看你的php版本,现在相对应的dll文件

  6. Git命令详解(一)-个人使用

    本文暂时不会涉及到团队如何使用Git的内容,而是从个人的角度探讨如何用好Git. 约定 绿色的5位字符表示提交的ID,文中用<commit>表示,分别指向父节点.分支用橘色显示,分别指向特 ...

  7. 3proxy 二级代理配置样例

    适应情况: 有时,我们的机器HOST-A只能通过代理服务器HOST-B才可以访问internet, 而与我们相连的机器HOST-C也需要访问internet, 但是HOST-C却不能直接访问HOST- ...

  8. php开发工具zendstudio13破解补丁

    io?  Intelligent Code Editor Robust Debugging Capabilities Eclipse Ecosystem Mobile: AngularJS, Ioni ...

  9. VMware-workstation-full-12.0.1-3160714

    https://download3.vmware.com/software/wkst/file/VMware-workstation-full-12.0.1-3160714.exe 5A02H-AU2 ...

  10. BFS-hdu-4101-Ali and Baba

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4101 题目大意: 给一个矩阵,0表示空的可走,-1宝藏的位置(只有一个),其余的正整数表示该位置石头 ...