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
Nov 26 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
Smarty模板配置实例简析
2019/07/20 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python验证码识别实例代码
2018/02/03 Python
在python中bool函数的取值方法
2018/11/01 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
高考标语大全
2014/06/05 职场文书
私人委托书格式
2014/09/10 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
长江三峡导游词
2015/01/31 职场文书
第一军规观后感
2015/06/12 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电
pandas中pd.groupby()的用法详解
2022/06/16 Python