jQuery实现的placeholder效果完整实例


Posted in Javascript onAugust 02, 2016

本文实例讲述了jQuery实现的placeholder效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现的placeholder效果完整实例

具体代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery实现placeholder效果</title>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
    $(function () {
      initEvent();
    });
    //初始化提示内容的颜色
    function initEvent() {
      $('input.holder').each(function () {
        var $this = $(this), holder = $this.data('holder');
        if (holder) {
          $this.css('color', '#a9a9a9').val(holder);
        }
      });
      //获取焦点时设置内容的颜色和值为空
      $(document).off('focus', 'input.holder').on('focus', 'input.holder', function () {
        var $this = $(this);
        if ($this.val() === $this.data('holder')) {
          $this.css('color', 'black').val('');
        }
      });
      //失去焦点后还原提示内容
      $(document).off('focusout', 'input.holder').on('focusout', 'input.holder', function () {
        var $this = $(this);
        if ($.trim($this.val()) === '') {
          $this.css('color', '#a9a9a9').val($this.data('holder'));
        }
      });
    }
  </script>
</head>
<body>
  <input type="text" class="holder" name="name" value="" data-holder="请输入账户" /><br><br>
  <input type="text" class="holder" name="name" value="" data-holder="请输入密码" />
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
javascript实现密码验证
Nov 10 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
js实现上传图片及时预览
May 07 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 #Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 #Javascript
深入浅析search 搜索框的写法
Aug 02 #Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 #Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 #Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 #Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 #Javascript
You might like
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP解决中文乱码
2017/04/28 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
js常见遍历操作小结
2019/06/06 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
业务员的岗位职责
2014/03/15 职场文书
学校火灾防控方案
2014/06/09 职场文书
政府法律服务方案
2014/06/14 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
电力工程合作意向书
2015/05/11 职场文书
学校学期工作总结
2015/08/13 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL